Skip to content

Latest commit

 

History

History

client

README.md

Lowcoder frontend

Cloudflare Pages

The lowcoder-cloud Pages project is connected to lowcoder-org/lowcoder on GitHub. Cloudflare builds main for production and other branches for previews. The existing Git integration performs deployment; no separate upload workflow or custom Worker is needed for this static frontend.

Keep these build settings in the Cloudflare project:

Setting Value
Root directory client/
Build command yarn workspace lowcoder build
Build output directory packages/lowcoder/build
Production branch main

wrangler.toml records the Pages output directory, compatibility date, and production environment settings downloaded from the existing project. API URLs are compiled into the frontend during the build. The backend services continue to run separately; Pages does not host the Java or Node services.

Preview backend addresses are intentionally unset. Configure REACT_APP_API_SERVICE_URL and REACT_APP_NODE_SERVICE_URL with the separate dev services for preview builds, then rebuild. A successful static preview deployment alone does not mean its API connection works. Do not copy production addresses into preview configuration.

Vite copies packages/lowcoder/public/_headers into the build for cache revalidation of the app entry point and VERSION file. Pages provides SPA fallback routing for direct links and refreshes when no top-level 404.html exists. Do not add a /* /index.html 200 redirect: Pages rejects it as a loop. See Pages routing behavior.

Before pushing a dependency or version change, run from client/:

yarn install --immutable
NODE_ENV=production NODE_OPTIONS=--max_old_space_size=4096 \
  REACT_APP_API_SERVICE_URL=https://api-service.lowcoder.cloud \
  REACT_APP_NODE_SERVICE_URL=https://node-service.lowcoder.cloud \
  yarn workspace lowcoder build

Use a supported Node.js release (validated with Node.js 22) and the repository's Yarn 3.6.4. Commit yarn.lock together with package version changes. The CLI template's lowcoder-sdk range must accept the current workspace SDK version; otherwise Yarn can resolve an older published SDK or reject a stale lockfile during Cloudflare's immutable install.

Publishing the npm packages

The Comps and SDK workflows publish newer package versions from dev using npm trusted publishing with GitHub OIDC. They use Node.js 22, the repository's Yarn, npm 11.21.0 for publication, and id-token: write. Neither workflow uses LOWCODERNPMBOT or NODE_AUTH_TOKEN. npm automatically attaches provenance for these public packages. Their repository metadata identifies this repository and workspace.

Before running these workflows, a package owner must configure a GitHub Actions trusted publisher in npm → package → Settings → Trusted publishing:

npm package GitHub organization Repository Workflow filename
lowcoder-comps lowcoder-org lowcoder publish-lowcoder-comps.yml
lowcoder-sdk lowcoder-org lowcoder publish-lowcoder-sdk.yml

Use the filename only, without .github/workflows/. Leave the environment field empty because these jobs do not use a GitHub environment. Enable Allow npm publish; permission to stage a package alone is insufficient. As of October 2026, a new publisher configuration expires if it does not complete its first successful publish within two days, so create it when ready to run the workflows.

Push the updated workflows to dev and use the new runs. Rerunning a failed run from before this migration reuses its old token-based workflow. Each workflow serializes publication and reports build and publish as separate steps. Comps publishes the compiled package in packages/lowcoder-cli/.out; SDK publishes from packages/lowcoder-sdk after building dist.

An E404 or ENEEDAUTH during OIDC publication can indicate mismatched publisher settings. Check the exact organization, repository, workflow filename, allowed publish action, and expiry. npm whoami and npm publish --dry-run do not verify OIDC publishing permission; confirm an actual successful registry publication.

The CLI and Core workflows still use LOWCODERNPMBOT. Do not revoke a shared token until those consumers have been migrated or otherwise accounted for.

How to contribute

Start a local backend server

Use prebuilt docker image

Simply run the below command to start a backend server.

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

For more information, view our docs

Build Docker image from source

  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
docker run -d --name lowcoder-dev -p 3000:3000 -v "$PWD/stacks:/lowcoder-stacks" lowcoder-dev

Start develop

  1. Check out source code.
  2. 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
  1. After dev server starts successfully, it will be automatically opened in the default browser.

Before submitting a pull request

In addition, before submitting a pull request, please make sure the following is done:

  1. If you’ve fixed a bug or added code that should be tested and add unit test suite.
  2. Run test and ensure all test suites pass.
yarn test
  1. If you add new dependency, use the yarn worspace tool to make sure yarn.lock is also updated.
yarn workspace lowcoder <package name>

Developing and publishung UI components for Lowcoder

  1. Initialization

Project initiation

yarn create Lowcoder-plugin <your plugin name>

Go to the project root

cd my-plugin

Start the development environment

yarn start

After executing yarn start, the browser is automatically opened and you enter the component development environment. Please find more information in our docs

  1. Export components

To export all the components, use src/index.ts, for example:

import HelloWorldComp from "./HelloWorldComp";

export default {
  hello_world: HelloWorldComp,
};

import HelloWorldComp from "./HelloWorldComp";

  1. Publish plugins

When you finish developing and testing the plugin, you can publish it into the npm registry. Login in to the npm registry locally, and then execute the following command:

yarn build --publish

You can check a code demo here: Code Demo on Github

Deployment of the Lowcoder Frontend to Netlify (Local Build Flow)

⚙️ Prerequisites

  • Node.js & Yarn installed
  • Netlify CLI installed:
npm install -g netlify-cli
  • Netlify CLI authenticated:
netlify login
  • The project is linked to the correct Netlify site:
cd client
netlify link

🛠 Setup netlify.toml (only once)

Inside the client/ folder, create or update netlify.toml:

[build]
  base = "client"
  command = "yarn workspace lowcoder build"
  publish = "client/packages/lowcoder/build"

This ensures Netlify uses the correct build and publish paths when building locally.


🚀 Deployment Steps

1️⃣ Navigate into the client folder:

cd client

2️⃣ Run local build (with Netlify environment variables injected):

netlify build

3️⃣ Deploy to production:

netlify deploy --prod --dir=packages/lowcoder/build

🔧 Notes

  • This local build flow fully honors the environment variables configured in Netlify.
  • No build happens on Netlify servers — only the deploy step runs on Netlify.
  • This approach avoids Netlify’s build memory limits.