Opensource Contribution

By expanding the capabilities of Lowcode platforms through open source contributions, we not only broaden the spectrum of use cases but also exponentially increase their value to the community. We commit to supporting this growth in every way possible.

Here is a small guide on where to start and which style of development we prefer.

Core System

Lowcoder has 3 main services, which are developed by the Community and us - the Lowcoder Team.

• - JavaScript, TypeScript, React, ANTd

• - Java, Spring, Spring WebFlux - using MongoDB and Redis

• - Node.js, TypeScript

These 3 services are the main deliverables and the codebase of Lowcoder. We are happy to work with you on your contribution and express that Frontend App and API-Service are fairly complex systems. You would need to reserve a bit of time to get to know it and understand the details.

Plugins and Extensions

Extension of Lowcoder for and with the Community happens mainly by the Plugins and Extensions at defined Interfaces. Lowcoder has the following Plugin Systems:

• Plugin API of API Service

Visual Component Plugin Builder

The main steps are:

• Local installation & preparation

• Developing & preview the Components

• Publish the Components to NPM

1. Forking of the Repository

To ensure you can develop your Component Plugin including as your repository, please fork (update) our lowcoder-org/lowcoder-create-component-plugin repository first.

1. Cloning of the new repository to work local

Now you can clone your new repository to develop local.

https://github.com/<your org>/lowcoder-create-component-plugin.git

or 

git@github.com:<your org>/lowcoder-create-component-plugin.git

1. Local Development preparation

Navigate your terminal or bash to your /root folder of the cloned repository to install general dependencies and the Lowcoder SDK

yarn install

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

npm create lowcoder-plugin lowcoder-comp-my-plugin

Navigate your terminal or bash to the newly created Plugin folder

cd lowcoder-comp-my-plugin

Install all dependencies:

yarn install

Start the Playground (Components Preview): Now you can start your Plugin in the playground, so during development you have a realtime preview.

yarn start

Start developing

Data, methods, and properties are visible and interactive, so you can test your Component during development. The view will automatically refresh.

Find the /src folder in the new created project. Here are some demonstration files prepared. The Lowcoder Component Builder makes the development & publishing of multiple individual components as bundle possible. In the left navigation of the Components Preview you can switch between your components.

Before you publish, please cleanup all demonstration files like the "HelloWorldComp.tsx" and the references to HelloWorldComp.

Folder Structure:

lowcoder-comp-my-plugin/

• ├ icons/

• ├ locales/

• └ src/

  • └ index.ts

In "icons" you will place an SVG, which will later displayed to drag the component to the Lowcoder Editor Canvas. In "locales" you place translation files for all displayed texts of your components And in the "src" folder you place all code. Make sure, your Copmonent is referenced right in the index.ts file.

Publish a Component Plugin

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

yarn build --publish

Lowcoder Marketplace

Code Contribution to Core System

We feel honored to work with you together on Lowcoder as a Platform! A good start and procedure that allows a smooth development process is like this:

2. Clone it into your local environment / IDE

3. Create a workable local Development Environment

4. Create your Feature-Branch from /main branch to get the latest stable Environment

5. Develop your magic and enjoy the ride!

7. Follow up if / when we have questions at your Merge Request

Frontend App

Start a local backend server

Simply run the below command to start a local backend server. This is the fasted way. The Backend typically changes less frequent, so you can just run the latest version

docker run -d --name lowcoder -p 3000:3000 -v "$PWD/stacks:/lowcoder-stacks" lowcoderorg/lowcoder-ce

Build a Docker image from the source

You also can build the image from the latest Source code or a special branch. However, for pure frontend development there are less reasons to go this way.

1. Check out the source code and change to source dir.

2. Use the command below to build a Docker image :

docker build -f ./deploy/docker/Dockerfile -t lowcoder-dev .

1. Start the fresh built Docker image

docker run -d --name lowcoder-dev -p 3000:3000 -v "$PWD/stacks:/lowcoder-stacks" lowcoder-dev

Start developing

1. Check out the source code.

git@github.com:your-org/lowcoder.git

1. Change to /client dir in the source dir.

cd client

1. Run yarn to install dependencies.

yarn install

1. Start dev server:

LOWCODER_API_SERVICE_URL=http://localhost:3000 yarn start

Vite keeps the Browser for all changes current. That means you can see the effect of your development in most cases instantly. Sometimes, Vite rebuilds briefly and reloads the App in the Browser. In most cases, however, the changes are directly rendered. If you are not sure that your changes are already active in the Browser, you can stop and restart Vite at any time.

API-Service

Preparation

You would need to have a MongoDB and a RedisDB ready and accessible.

If you don't have an available MongoDB, you can start a local MongoDB service with docker:

docker run -d  --name lowcoder-mongodb -p 27017:27017 -e MONGO_INITDB_DATABASE=lowcoder mongo

If you don't have an available Redis, you can start a local Redis service with docker:

docker run -d --name lowcoder-redis -p 6379:6379 redis

Both, you will need to register in the application-lowcoder.yml file.

spring:
  data:
    mongodb:
      authentication-database: admin
      auto-index-creation: false
      uri: mongodb://localhost:27017/lowcoder?authSource=admin
    redis:
      url: redis://localhost:6379

Using VS Code

Create a launch.json file in the .vscode folder of your newly opened workspace. The contents should look like this:

{
    "version": "0.0.1",
    "configurations": [
        {
            "type": "java",
            "name": "ServerApplication",
            "request": "launch",
            "mainClass": "org.lowcoder.api.ServerApplication",
            "projectName": "Lowcoder API Service",
            "vmArgs": "-Dpf4j.mode=development -Dpf4j.pluginsDir=./server/api-service/lowcoder-plugins -Dspring.profiles.active=lowcoder -XX:+AllowRedefinitionToAddDeleteMethods --add-opens java.base/java.nio=ALL-UNNAMED"
        }
    ],
}

Important is here the command -Dspring.profiles.active= - as it is responsible for the selection of the right apllication settings file too.

Start the debug locally

Make sure that the apllication settings file contains the full local configuration you need.

The apllication settings file is named application-<profile>.yaml and reside in server/api-service/lowcoder-server/src/main/resources.

The profile relates to your setting in the launch file. For example: -Dspring.profiles.active=lowcoder would make sure, lowcoder seeks the right config at application-lowcoder.yaml

Navigate to the file: server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/ServerApplication.java This is the main class. Now you can use the IDE to "run" it or "debug it".

Unsing IntelliJ IDEA

Configure the Run/Debug configuration as shown below.

Next, execute the following commands in sequence

cd server
mvn clean package

After Maven package runs successfully, you can start the Lowcoder server with IntelliJ IDEA.

1. Check out the source code and change to source dir.

2. Use the Terminal of your IDE to execute the following commands. First, change to the server directory.

cd server/api-service

1. Now, you can build the sources.

mvn clean package -DskipTests

// or to include all Tests

mvn clean package

1. And run the Server

java -Dpf4j.mode=development -Dspring.profiles.active=lowcoder -Dpf4j.pluginsDir=lowcoder-plugins -jar lowcoder-server/target/lowcoder-server-1.0-SNAPSHOT.jar

Node Service

Please read more information in the following guides:

Preparation

To develop and test Datasource Plugins locally in the Node-Service, you should have Node.js installed in Version from v14.18.0 or from v16.0.0.

Start of Development

1. Check out the source code and change to source dir.

2. Use the Terminal of your IDE to execute the following commands. First, change to the server directory.

cd server/node-service

1. Install dependencies

yarn install

1. Now you can start the local development Server. We use Nodemon.

yarn dev

Bundle it for Production

yarn build 
yarn start

Plugin Skeleton Helper for OpenAPI Services

We have a helper script that enables you, based on an OpenAPI Specification, to bootstrap the development of a Datasource Plugin.

yarn genOpenApiPlugin --name Jira --url https://developer.atlassian.com/cloud/jira/platform/swagger-v3.v3.json

Sometimes, due to network issues, the spec file cannot be downloaded correctly. In this case, it can be manually downloaded to the file src/plugins/<plugin id>/<plugin id>.spec.yaml(json).