Skip to content

Commit 318182f

Browse files
author
FalkWolsky
committed
Update the Readme
1 parent b40eb79 commit 318182f

File tree

1 file changed

+58
-7
lines changed

1 file changed

+58
-7
lines changed

README.md

+58-7
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,39 @@
1-
# create-lowcoder-plugin
1+
# Lowcoder Component Builder
22

3-
## How to build a Component Plugin
3+
## How to build a Lowcoder Component Plugin
44

5-
This script helps you to create a skeleton Lowcoder Component, which you can then publish on npm and use it as imported Plugin in any app.
5+
This script helps you to create a skeleton Lowcoder Component, which you can then publish on npm and use it as imported Plugin in any app.
6+
7+
The main steps are:
8+
9+
- Fork of the repository
10+
- Local installation
11+
- Developing & preview the Component
12+
- Publish the component
13+
14+
### Forking of the Repository
15+
16+
To ensure you can develop your Component Plugin including as your repository, please fort (update) our lowcoder-org/lowcoder-create-component-plugin repository first. Find here more information: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/fork-a-repo
17+
18+
### Cloning of the new repository to work local
19+
20+
Now you can clone your new repository to develop local.
621

7-
1) Navigate your terminal or bash to /client and install general dependencies
822
```bash
9-
cd client
23+
https://github.com/lowcoder-org/lowcoder-create-component-plugin.git
24+
25+
or
26+
27+
git@github.com:lowcoder-org/lowcoder-create-component-plugin.git
28+
```
29+
30+
### Local Development preparation
31+
32+
1) Navigate your terminal or bash to your /root folder of the cloned repository to install general dependencies and the Lowcoder SDK
33+
```bash
1034
yarn install
1135
```
12-
1) execute the Plugin Builder Script. PLease name your plugin with the prefix lowcoder-comp-
36+
2) execute the Plugin Builder Script. PLease name your plugin with the prefix **"lowcoder-comp-"** to make it easy for other users to find Lowcoder Component Pluins on NPM
1337

1438
```bash
1539
npm create lowcoder-plugin lowcoder-comp-my-plugin
@@ -23,12 +47,39 @@ cd lowcoder-comp-my-plugin
2347
yarn install
2448
```
2549
Now you can start your Plugin in the playground, so during development you have a realtime preview.
26-
4) install all dependencies:
50+
5) install all dependencies:
2751
```bash
2852
yarn start
2953
```
3054
This will start the local development server and open a browser on http://localhost:9000
3155

56+
## Local development
57+
58+
After the preparation, a skeleton project for Lowcoder Component Plugin development was created and the SDK prepared.
59+
A new browser window should open at http://localhost:9000
60+
This is the Components Preview, which allows you to see your new component in action, as it would work in the Lowcoder Editor.
61+
62+
Data, methods and properties are visible and interactive, so you can test your Component during development.
63+
The view will get automatically refreshed.
64+
65+
Find the /src folder in the new created project. Here are some demonstration files prepared.
66+
The Lowcoder Component Builder makes the development & publishing of multiple individual components as bundle possible.
67+
In the left navigation of the Components Preview you can switch between your components.
68+
69+
Before you publish, please cleanup all demonstration files like the "HelloWorldComp.tsx" and the references to HelloWorldComp.
70+
71+
Folder Structure:
72+
73+
#### lowcoder-comp-my-plugin/
74+
* ├ icons/
75+
* ├ locales/
76+
* └ src/
77+
* └ index.ts
78+
79+
In "icons" you will place an SVG, which will later displayed to drag the component to the Lowcoder Editor Canvas.
80+
In "locales" you place translation files for all displayed texts of your components
81+
And in the "src" folder you place all code. Make sure, your Copmonent is referenced right in the index.ts file.
82+
3283
## How to publish a Component Plugin
3384

3485
With the following command you can publish the script to the NPM repository:

0 commit comments

Comments
 (0)