About lowcode-Engine, most of the articles on the market are informational, or shallow demo runs, few really serious use of detailed articles. This article will use Ali’s low code engine implementation to encapsulate custom components and reference your own custom components in the Demo project, while recording the pits encountered.
Ali’s official website for lowcode engine: lowcode-engine.cn/
But occasionally official documents don’t open… You can also see the documentation at www.yuque.com/lce/doc
Run the official demo
There are two ways to create low-code applications:
- Access editor
- Access runtime
Let’s plug in the editor and start the bumpy integration journey.
Find the Demo Git repository, clone it, and run NPM Install
/ / clone demo to a local git clone https://github.com/alibaba/lowcode-demo.git / / install dependencies NPM NPM install/run/project startCopy the codeI thought I could just follow the no-brain trilogy, but I was too naive…
NPM install dependency error
The following error occurs when NPM install is run
npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While considerations: @alilc/[email protected] NPM ERR! Found: [email protected] NPM ERR! node_modules/react npm ERR! Peer react@">=16.0.0" from @alifd/[email protected] NPM ERR! node_modules/@alifd/next npm ERR! Peer @alifd/next@"1.x" from @alilc/[email protected] NPM ERR! node_modules/@alilc/lowcode-engine-ext npm ERR! Dev @alilc/lowcode-engine-ext@"^1.0.0" from the root project NPM ERR! Peer react@">=16.0.0" from @alifd/[email protected] NPM ERR! node_modules/@alifd/meet-react npm ERR! Peer @alifd/meet-react@"^2.0.0" from @alifd/[email protected] NPM ERR! node_modules/@alifd/next npm ERR! Peer @alifd/next@"1.x" from @alilc/[email protected] NPM ERR! node_modules/@alilc/lowcode-engine-ext npm ERR! Dev @alilc/lowcode-engine-ext@"^1.0.0" from the root project NPM ERR! 1 more (react-dom) npm ERR! npm ERR! Could not resolve dependency: npm ERR! Peer react@"^16.3.0" from @alilc/[email protected] NPM ERR! node_modules/@alilc/lowcode-engine-ext npm ERR! Dev @alilc/lowcode-engine-ext@"^1.0.0" from the root project NPM ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See /Users/solonnliu/.npm/eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! /Users/solonnliu/.npm/_logs/2022-04-07T02_24_06_472Z-debug.logCopy the code–force, or –legacy-peer-deps; –force, or –legacy-peer-deps
npm install --force
Copy the codeAfter some twists and turns, the dependency is finally installed.
NPM start an error
You think this is the end? Running NPM start is still stuck
% npm start
> @alilc/[email protected] start
> build-scripts start --disable-reload --port 5556
@alib/build-scripts 0.1.32
Run `npm install sass` or `yarn add sass` inside your workspace.
Copy the codeThis time, however, you just need to install sass and run the command: NPM install sass as prompted
Then start again: NPM start, there is a new problem:
ERROR Failed to compile with 1 errors 10:44:51 AM
This dependency was not found:
* react-is in ./node_modules/@formily/next/esm/__builtins__/toArray.js
To install it, you can run: npm install --save react-is
Copy the codeRun NPM install –save react-is as prompted
Then run the start command again and finally start successfully!
NPM start / /... Starting the development server at: -local: http://localhost:5556/Copy the code
Second, develop your own component library
If the official component library cannot meet the requirements and you want to expand your own component library, you need to use the project template provided by the engine to create a new project development component library. Or, based on your original project, install build-scripts and its low-code development plug-in.
Let’s start with the newly developed component:
Official document address: lowcode-engine.cn/docV2/funcv…
The component project is initialized
npm init @alilc/element your-material-name
Copy the codeSelect basic information such as the component type
My - materials ├ ─ ─ the README. Md ├ ─ ─ components (business components directory) │ ├ ─ ─ ExampleComponent / / business component 1 │ │ ├ ─ ─ the build / / [compiled] [for] │ │ │ └ ─ ─ Index.html / / 【 compiler to generate 】 【 for 】 can preview files directly │ │ ├ ─ ─ lib / / the compiler to generate 】 【 for 】 │ │ │ ├ ─ ─ index. The js / / the compiler to generate 】 【 for 】 js file entrance │ │ │ ├ ─ ─ index. The SCSS / / "compiled" [for] CSS file entrance │ │ │ └ ─ ─ style.css. Js / / compiler generated js version will choose 】 【 】 CSS entry documents, convenient to heavy │ │ ├ ─ ─ the demo / / document [for] components, used to generate the component development preview, And generate the component documents │ │ │ └ ─ ─ basic. The md │ │ ├ ─ ─ SRC / / component source code will choose 】 【 │ │ │ ├ ─ ─ index. The js / / [for], components export file │ │ │ └ ─ ─. Main SCSS / / 【 for 】, Contains only the style of the component itself source file │ │ ├ ─ ─ the README. Md / / [for], component and API │ │ └ ─ ─ package. The json / / 【 for 】 └ ─ ─ └ ─ ─ ExampleComponent2 / / business component 2Copy the codeComponent development and debugging
NPM run lowcode:dev # Build lowcode:buildCopy the codeExecuting the above command generates a lowcode folder in the component (library) root directory, which contains the lowcode description for each component:
When you add a new component in the SRC/Components directory and export it in SRC /index.tsx and then execute NPM run lowcode:dev, the low-code plug-in automatically generates a low-code description (meta.ts) of the new component in the lowcode/ directory.
The user can modify the configuration of the component directly by modifying the low code description:
1) Set the setter for the component; (The setup introduced in the previous chapter can also be customized to the material)
2) Add component configuration items
3) Change the current configuration item
In field
The above is basically the official documentation about the description of custom components, I think it is a little rushed, custom components are more important for developers, the documentation is a little little.
Follow the above description step by step, and finally find that the newly added components cannot be displayed, and some dark pits will be hidden.
Under SRC/Components, create a folder called compo and create two files: compo. TSX and index.tsx, where compo. TSX is the component code and index.tsx is the main export
// Compo.tsx import * as React from 'react' import {createElement} from 'react' export interface CompoProps { text? : string; } const Compo: React.FC<CompoProps> = ({text}) => { // @ts-ignore return (<div>{text || 'demo test'}</div>) } export default Compo // index.tsx import Compo from "./Compo"; export type {CompoProps} from './Compo' export default Compo;Copy the codeThen add Compo and CompoProps to SRC /index.tsx
export type {CompoProps} from './components/compo'
export {default as Compo} from './components/compo'
Copy the codeThis simple custom component is complete
Notice a few potholes here:
- Except in the component itself
index.tsxandsrc/index.tsxExport the props type definition of the component, otherwise it will not be found in the component library. In the example above, if only exportCompoWithout exportCompoPropsI can’t render it. - After adding a component, run the following command again:
npm run lowcode:dev, the built-in hot update should not listen for new files, so do not restart the effect.
Release the component
Newly created component libraries, after being debugged locally, need to be published to NPM before they can be integrated into the project.
Check whether the component library’s package.json file has a unique name on NPM. If it has a duplicate name, publishing will fail.
Then issue the following command to publish the component:
npm publish
Copy the codeNote that you need to register your NPM account on NPM official website and then login through NPM login before pubulish.
After the release is complete, open the NPM official website to check whether the release is successful
Congratulations, you have completed the development and release of custom components!
Use custom component libraries in Demo
Dilemma: Incomplete documentation
You completed the development of custom components in the previous step, so how do you use them?
As for how to use custom components, I searched through official documents, but found no particularly clear description, and did not tell what to do next. I had to look at the code exploration of demo by myself.
Analyzing demo source code
What should I do if the documentation is not clear? The most effective way is to look at the page first and figure out which module is closest to the answer we want.
After analysis, it is found that there is a drop-down box for switching components in the demo, among which there is an item “Basic Fusion component + single custom component”. There are examples of custom components, which may contain what we are looking for.
Once you’ve found a feature point on the page, how do you quickly locate it in your code? You can look at the directory structure one by one to understand the meaning of each folder, which can be time-consuming and misleadingly named. The easiest way to do a global search, such as “custom component”, is to see the following results:
According to the search results, basic fusion component + single custom component belongs to basic-fusion-with-single-component module. Open the directory, and sure enough, you can find this module
The module has been found and the next step is to analyze how to use it.
Follow suit and try to introduce custom components
Json: Basic-fusion-with-single-component assets. Json: Basic-fusion-with-single-component Assets. Json: basic-fusion-with-single-component Assets
More than 20,000 lines…
When you fold it up, it actually has four parts, so let’s look at them one by one.
Define the address of each component library.
"Packages" : [{" title ":" fusion component library ", "package" : "@ alifd/next", "version" : "1.23.0", "urls" : [" https://g.alicdn.com/code/lib/alifd__next/1.23.18/next.min.css ", "Https://g.alicdn.com/code/lib/alifd__next/1.23.18/next-with-locales.min.js", "library" : "Next"}, {" title ": "Custom individual components", "package" : "m - 220318", "version" : "1.23.0", "urls" : [ "./fixtures/basic-fusion-with-single-component/view.css", "./fixtures/basic-fusion-with-single-component/view.js" ], "library": "M220318" } ]Copy the codeAs you can see, the structure of each component library is similar. Customizing individual components refers to local paths, but our component library is published, so it is not suitable for us. The way of the first Fusion component library is what we need.
So where do we find this packages definition? Back to custom components project mini – elements, find the build/lowcode/assets. Prod. Json
There are definitions of packages and components. Start by opening two urls in your browser to see if they work.
{"packages": [{"package": "mini-elements", "version": "0.1.1", "Library ": "MiniElements", "urls": [" https://unpkg.com/[email protected]/build/lowcode/view.js ", "Https://unpkg.com/[email protected]/build/lowcode/view.css", "editUrls" : [" https://unpkg.com/[email protected]/build/lowcode/view.js ", "Https://unpkg.com/[email protected]/build/lowcode/view.css"]}], "components" : [{" exportName ": "MiniElementsMeta", "NPM" : {" package ":" mini - elements ", "version" : "while"}, "url" : "Https://unpkg.com/[email protected]/build/lowcode/meta.js", "urls" : {" default ": "Https://unpkg.com/[email protected]/build/lowcode/meta.js"}}], "sort" : {" groupList ": [" Select Components ", "Atomic Components"], "categoryList": [" basic element ", "layout container class", "form class", "details form class", "help class", "dialog box class", "business class", "general", "guide", "input", "information display", "information feedback"]}, "groupList" : [" Select Components", "Atomic Components"], "ignoreComponents": {}}Copy the codeCopy the required fields as defined in the other files in the demo.
Packages, Components and componentList need to be modified. The following contents need to be added:
1.1.13 "{" version" : ", "packages" : [{" title ":" my custom components ", "package" : "mini - elements", "version" : "while", "library" : "MiniElements", "urls": [" https://unpkg.com/[email protected]/build/lowcode/view.js ", "Https://unpkg.com/[email protected]/build/lowcode/view.css"]}], "components" : [{" exportName ": "MiniElementsMeta", "NPM" : {" package ":" mini - elements ", "version" : "while"}, "url" : "Https://unpkg.com/[email protected]/build/lowcode/meta.js", "urls" : {" default ": "Https://unpkg.com/[email protected]/build/lowcode/meta.js"}}], "componentList" : [{" title ":" my custom components ", "icon" : ", "children": [{"componentName": "ChartDemo", "library": "MiniElements", "title": "ChartDemo", "children": [{"componentName": "ChartDemo", "library": "MiniElements", "title": "ChartDemo", "icon": }, {"componentName": "ColorfulButton", "title": "ColorfulButton", "description": "here is the ColorfulButton", "library": "MiniElements"}, {"componentName": "ColorfulInput", "title": "ColorfulInput", "description": "Library ": "MiniElements"}]},]}Copy the codeThe children of componentList is the specific component exported from our custom component library. The specific component shown here will be recognized only when it is written. The above three components are exported.
After modifying assets. Json, run the demo again:
npm run start
Copy the codeYou can see that our custom component appears in the component library, drag it to the canvas to render properly, and click Preview to render properly.
This completes the custom component library using Lowcode-Engine and integrates it into your project.
Four,
This low code engine is very powerful, you want to have all the features, high degree of customization.
However, there are some issues, such as the completeness and readability of the documentation, which make it slightly more expensive to get started. There are many definitions, and it takes a lot of time to study the rules before they are implemented in real projects.
However, the overall cost is still much lower than implementing a low-code system from scratch, so if you don’t have much time to implement it from scratch, borrowing a low-code engine is a good option.
We will continue to update the material description, setup extension, panel extension and other complete implementation scheme, welcome to pay attention to ~