### Local Debugging Setup

Source: https://github.com/alibaba/lowcode-engine/blob/main/packages/engine/README.md

Steps to clone the repository, install dependencies, and start the Lowcode Engine for local debugging. It also provides recommendations for npm registry mirrors and notes on Windows environment setup.

```bash
git clone git@github.com:alibaba/lowcode-engine.git
cd lowcode-engine
npm install
npm run setup
npm start
```

--------------------------------

### Local Debugging Setup

Source: https://github.com/alibaba/lowcode-engine/blob/main/README.md

Steps to clone the repository, install dependencies, and start the Lowcode Engine for local debugging. It also provides recommendations for npm registry mirrors and notes on Windows environment setup.

```bash
git clone git@github.com:alibaba/lowcode-engine.git
cd lowcode-engine
npm install
npm run setup
npm start
```

--------------------------------

### Project Setup and Running

Source: https://github.com/alibaba/lowcode-engine/blob/main/docs/docs/guide/expand/editor/graph.md

Commands to navigate to the demo directory, install dependencies, and start the demo application.

```bash
cd demo-graph-x6
npm install
npm run start
```

--------------------------------

### Local Debugging Setup

Source: https://github.com/alibaba/lowcode-engine/blob/main/packages/engine/README-zh_CN.md

Steps to clone the lowcode-engine repository, install dependencies, and start the development server for local debugging. It also includes recommendations for npm registry usage and environment setup for Windows users.

```bash
$ git clone git@github.com:alibaba/lowcode-engine.git
$ cd lowcode-engine
$ npm install
$ npm run setup
$ npm start
```

--------------------------------

### Local Debugging Setup

Source: https://github.com/alibaba/lowcode-engine/blob/main/README-zh_CN.md

Steps to clone the lowcode-engine repository, install dependencies, and start the development server for local debugging. It also includes recommendations for npm registry usage and environment setup for Windows users.

```bash
$ git clone git@github.com:alibaba/lowcode-engine.git
$ cd lowcode-engine
$ npm install
$ npm run setup
$ npm start
```

--------------------------------

### Install and Start Lowcode Engine

Source: https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/tests/fixtures/test-cases/react-module/demo1/expected/demo-project/README.md

Commands to install project dependencies and start the local development server for the Lowcode Engine. The server can be accessed at http://localhost:3333.

```bash
# Install dependencies
$ npm install

# Start the service
$ npm start  # visit http://localhost:3333
```

--------------------------------

### Install and Start Lowcode Engine

Source: https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/tests/fixtures/test-cases/react-app/demo5/expected/demo-project/README.md

Commands to install project dependencies and start the local development server for the Lowcode Engine. The server can be accessed at http://localhost:3333.

```bash
# Install dependencies
$ npm install

# Start the service
$ npm start  # visit http://localhost:3333
```

--------------------------------

### Install and Start Lowcode Engine

Source: https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/tests/fixtures/test-cases/react-app/demo3/expected/demo-project/README.md

Commands to install project dependencies and start the local development server for the Lowcode Engine. The server can be accessed at http://localhost:3333.

```bash
# Install dependencies
$ npm install

# Start the service
$ npm start  # visit http://localhost:3333
```

--------------------------------

### Install and Start Lowcode Engine

Source: https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/tests/fixtures/test-cases/react-app/demo8-datasource-prop/expected/demo-project/README.md

Commands to install project dependencies and start the local development server for the Lowcode Engine. The server can be accessed at http://localhost:3333.

```bash
# Install dependencies
$ npm install

# Start the service
$ npm start  # visit http://localhost:3333
```

--------------------------------

### Install and Start Lowcode Engine

Source: https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/tests/fixtures/test-cases/react-app/demo_11-jsslot-2/expected/demo-project/README.md

Commands to install project dependencies and start the local development server for the Lowcode Engine. The server can be accessed at http://localhost:3333.

```bash
# Install dependencies
$ npm install

# Start the service
$ npm start  # visit http://localhost:3333
```

--------------------------------

### Install and Start Lowcode Engine

Source: https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/tests/fixtures/test-cases/react-app/demo4/expected/demo-project/README.md

Commands to install project dependencies and start the local development server for the Lowcode Engine. The server can be accessed at http://localhost:3333.

```bash
# Install dependencies
$ npm install

# Start the service
$ npm start  # visit http://localhost:3333
```

--------------------------------

### Install and Start Lowcode Engine

Source: https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/tests/fixtures/test-cases/react-app/demo_10-jsslot/expected/demo-project/README.md

Commands to install project dependencies and start the local development server for the Lowcode Engine. The server can be accessed at http://localhost:3333.

```bash
# Install dependencies
$ npm install

# Start the service
$ npm start  # visit http://localhost:3333
```

--------------------------------

### Install and Start Lowcode Engine

Source: https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/tests/fixtures/test-cases/react-app/demo2/expected/demo-project/README.md

Commands to install project dependencies and start the local development server for the Lowcode Engine. The server can be accessed at http://localhost:3333.

```bash
# Install dependencies
$ npm install

# Start the service
$ npm start  # visit http://localhost:3333
```

--------------------------------

### Install Dependencies and Start Material Development Server

Source: https://github.com/alibaba/lowcode-engine/blob/main/docs/docs/guide/quickStart/start.md

These bash commands install the required dependencies for a custom material project and then start the development server. This allows developers to preview and test their material at `http://localhost:3333/`.

```bash
npm i
npm run lowcode:dev
```

--------------------------------

### Install and Run Project

Source: https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/tests/fixtures/test-cases/react-app/demo1/expected/demo-project/README.md

Commands to install project dependencies using npm and start the development server. The server is accessible at http://localhost:3333.

```bash
# 安装依赖
$ npm install

# 启动服务
$ npm start  # visit http://localhost:3333
```

--------------------------------

### Install and Start Lowcode Engine

Source: https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/tests/fixtures/test-cases/react-app/demo7-literal-condition2/expected/demo-project/README.md

Commands to install project dependencies and start the local development server for the Lowcode Engine. The server can be accessed at http://localhost:3333.

```bash
# Install dependencies
$ npm install

# Start the service
$ npm start  # visit http://localhost:3333
```

--------------------------------

### Install and Start Lowcode Engine

Source: https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/tests/fixtures/test-cases/react-app/demo6-literal-condition/expected/demo-project/README.md

Commands to install project dependencies and start the local development server for the Lowcode Engine. The server can be accessed at http://localhost:3333.

```bash
# Install dependencies
$ npm install

# Start the service
$ npm start  # visit http://localhost:3333
```

--------------------------------

### Install Dependencies and Start Plugin Project

Source: https://github.com/alibaba/lowcode-engine/blob/main/docs/docs/guide/quickStart/start.md

These bash commands are used to install the necessary dependencies for a plugin project and then start the development server, allowing for immediate testing and debugging.

```bash
npm install
npm run start
```

--------------------------------

### Install and Start Lowcode Engine

Source: https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/tests/fixtures/test-cases/react-app/demo2-utils-name-alias/expected/demo-project/README.md

Commands to install project dependencies and start the local development server for the Lowcode Engine. The server can be accessed at http://localhost:3333.

```bash
# Install dependencies
$ npm install

# Start the service
$ npm start  # visit http://localhost:3333
```

--------------------------------

### Install and Run Project

Source: https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/tests/fixtures/test-cases/react-app/demo9-datasource-engine/expected/demo-project/README.md

Commands to install project dependencies using npm and start the development server. The server is accessible at http://localhost:3333.

```bash
# 安装依赖
$ npm install

# 启动服务
$ npm start  # visit http://localhost:3333
```

--------------------------------

### Constants Configuration Example

Source: https://github.com/alibaba/lowcode-engine/blob/main/docs/docs/specs/lowcode-spec.md

Shows an example of global constants defined for the application, such as environment and domain.

```json
{
  "ENV": "prod",
  "DOMAIN": "xxx.com"
}
```

--------------------------------

### Start Development Server

Source: https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/tests/fixtures/test-cases/rax-app/demo12-refs/expected/demo-project/README.md

Starts the application in development mode, enabling hot reloading for edits. Access the app at http://localhost:3333.

```bash
npm run start
```

--------------------------------

### Start Development Server

Source: https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/tests/fixtures/test-cases/rax-app/demo13-datasource-prop/expected/demo-project/README.md

Starts the application in development mode, enabling hot reloading for edits. Access the app at http://localhost:3333.

```bash
npm run start
```

--------------------------------

### Start Development Server

Source: https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/tests/fixtures/test-cases/rax-app/demo05/expected/demo-project/README.md

Starts the application in development mode, enabling hot reloading for edits. Access the app at http://localhost:3333.

```bash
npm run start
```

--------------------------------

### Start Development Server

Source: https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/tests/fixtures/test-cases/rax-app/demo11-utils-name-alias/expected/demo-project/README.md

Starts the application in development mode, enabling hot reloading for edits. Access the app at http://localhost:3333.

```bash
npm run start
```

--------------------------------

### Start Development Server

Source: https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/tests/fixtures/test-cases/rax-app/demo03/expected/demo-project/README.md

Starts the application in development mode, enabling hot reloading for edits. Access the app at http://localhost:3333.

```bash
npm run start
```

--------------------------------

### Deployment Steps

Source: https://github.com/alibaba/lowcode-engine/blob/main/docs/README.md

Provides a sequence of commands for deploying the Low-Code Engine, including building, publishing, syncing to CDN, updating versions, and site activation.

```bash
1. npm run build
2. npm publish # 记得改下版本号，比如 1.0.1

# 发布完后执行 tnpm syncOss 同步到 uipaas CDN
3. tnpm syncOss

4. 更新 diamond 版本 1.0.1
5. lowcode-engine.cn 站点生效
```

--------------------------------

### Full Example with Hidden Configuration

Source: https://github.com/alibaba/lowcode-engine/blob/main/docs/docs/faq/faq012.md

This complete JSON configuration includes the `reloadDataSource` setup and a `condition` to hide it from the configuration panel, providing a comprehensive example for material configuration.

```json
{
  title: {
    label: {
      type: 'i18n',
      'en-US': 'reloadDataSource',
      'zh-CN': 'reloadDataSource',
    },
  },
  name: 'reloadDataSource',
  setter: 'StringSetter',
  condition: () => false,
  initialValue: () => (
    {
      "type": "JSFunction",
      "value": "function(){ return this.reloadDataSource; }"
    }
  ),
}
```

--------------------------------

### 启动 Demo 项目

Source: https://github.com/alibaba/lowcode-engine/blob/main/docs/docs/guide/quickStart/start.md

在项目目录下执行启动命令，即可在本地运行低代码平台的 Demo。

```bash
npm run start
```

--------------------------------

### Local Debugging for Scaffolding

Source: https://github.com/alibaba/lowcode-engine/blob/main/docs/docs/guide/expand/editor/cli.md

Commands to set up and start a local development environment for a Lowcode element project after initialization. This includes installing dependencies and starting the development server.

```bash
cd your-element-name
npm install
npm start
```

--------------------------------

### CDN Options for LowCodeEngine

Source: https://github.com/alibaba/lowcode-engine/blob/main/README-zh_CN.md

Lists various CDN options for including LowCodeEngine and its React simulator renderer in a project. It covers alifd, uipaas, unpkg, and jsdelivr, along with instructions for self-hosting.

```html
https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.18/dist/js/engine-core.js

https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@1.0.18/dist/js/react-simulator-renderer.js
```

```html
https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/js/engine-core.js

https://uipaas-assets.com/prod/npm/@alilc/lowcode-react-simulator-renderer/1.0.18/dist/js/react-simulator-renderer.js
```

```html
https://unpkg.com/@alilc/lowcode-engine@1.0.18/dist/js/engine-core.js

https://unpkg.com/@alilc/lowcode-react-simulator-renderer@1.0.18/dist/js/react-simulator-renderer.js
```

```html
https://cdn.jsdelivr.net/npm/@alilc/lowcode-engine@1.0.18/dist/js/engine-core.js

https://cdn.jsdelivr.net/npm/@alilc/lowcode-react-simulator-renderer@1.0.18/dist/js/react-simulator-renderer.js
```

--------------------------------

### Setup and Build lowcode-engine

Source: https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/CONTRIBUTING.md

Installs dependencies and builds the lowcode-engine project, specifically focusing on the @alilc/lowcode-types package. This is a prerequisite for making changes.

```sh
lerna bootstrap && lerna run build --scope "@alilc/lowcode-types"
```

--------------------------------

### Basic React Renderer Usage

Source: https://github.com/alibaba/lowcode-engine/blob/main/docs/docs/guide/expand/runtime/renderer.md

A fundamental example demonstrating how to render a Lowcode schema using the React renderer, including component setup and ReactDOM mounting.

```javascript
import ReactRenderer from '@alilc/lowcode-react-renderer';
import ReactDOM from 'react-dom';
import { Button } from '@alifd/next';
import schema from './schema';

const components = {
  Button,
};

ReactDOM.render(
  <ReactRenderer
    schema={schema}
    components={components}
    appHelper={{
      utils: {
        xxx: () => {}
      }
    }}
  />,
  document.getElementById('root')
);
```

--------------------------------

### 启动项目

Source: https://github.com/alibaba/lowcode-engine/blob/main/docs/docs/guide/create/useEditor.md

成功安装依赖后，使用 `npm start` 命令启动低代码编辑器项目。

```bash
npm start
```

--------------------------------

### Lowcode Development Commands

Source: https://github.com/alibaba/lowcode-engine/blob/main/docs/docs/guide/expand/editor/material.md

Provides essential npm commands for managing the lowcode development environment, including installing dependencies, starting the development server for debugging, and building the project for production.

```bash
# 安装依赖
npm install

# 启动 lowcode 环境进行调试预览
npm run lowcode:dev

# 构建低代码产物
npm run lowcode:build
```

--------------------------------

### LowCode Engine Initialization

Source: https://github.com/alibaba/lowcode-engine/blob/main/packages/designer/README.md

Demonstrates how to initialize the LowCode Engine with basic configuration.

```javascript
import { init } from '@alilc/lowcode-engine';

init({}, {
  // Configuration options
});
```

--------------------------------

### Initialize LowCodeEngine

Source: https://github.com/alibaba/lowcode-engine/blob/main/packages/engine/README.md

Demonstrates how to initialize the LowCodeEngine and add a widget to the skeleton. This example shows adding a logo to the 'topArea' of the UI.

```ts
import { init, skeleton } from '@alilc/lowcode-engine';

// Add a widget to the top area
skeleton.add({
  area: 'topArea',
  type: 'Widget',
  name: 'logo',
  content: YourFantasticLogo,
  contentProps: {
    logo:
      'https://img.alicdn.com/tfs/TB1_SocGkT2gK0jSZFkXXcIQFXa-66-66.png',
    href: '/',
  },
  props: {
    align: 'left',
    width: 100,
  },
});

// Initialize the engine with a target DOM element
init(document.getElementById('lce'));
```

--------------------------------

### Material Asset Configuration Example

Source: https://github.com/alibaba/lowcode-engine/blob/main/docs/docs/faq/faq009.md

This JSON snippet illustrates a typical configuration for a material asset within the LowCode Engine. It specifies package details, version, library name, and URLs for default and design-time rendering, essential for correctly loading component assets.

```json
{
  "package": "@alilc/lowcode-materials",
  "npm": {
    "package": "@alilc/lowcode-materials"
  },
  "url": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.7/build/lowcode/meta.js",
  "urls": {
    "default": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.7/build/lowcode/meta.js",
    "design": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.7/build/lowcode/meta.design.js"
  }
}
```

--------------------------------

### Component Tree Structure Example

Source: https://github.com/alibaba/lowcode-engine/blob/main/docs/docs/specs/lowcode-spec.md

Provides an example of the component tree structure, showing nested components with their IDs, names, props, CSS, and children. It includes examples of data binding and event handling.

```json
{
  "id": "page1",
  "componentName": "Page",
  "fileName": "Page1",
  "props": {},
  "css": "body {font-size: 12px;} .table { width: 100px;}",
  "children": [
    {
      "componentName": "Div",
      "props": {
        "className": ""
      },
      "children": [
        {
          "componentName": "Button",
          "props": {
            "prop1": 1234,
            "prop2": [
              {
                "label": "选项 1",
                "value": 1
              }, {
                "label": "选项 2",
                "value": 2
              }
            ],
            "prop3": [
              {
                "name": "myName",
                "rule": {
                  "type": "JSExpression",
                  "value": "/\w+/i"
                }
              }
            ],
            "valueBind": {
              "type": "JSExpression",
              "value": "this.state.user.name"
            },
            "onClick": {
              "type": "JSFunction",
              "value": "function(e) { console.log(e.target.innerText) }"
            },
            "onClick2": {
              "type": "JSExpression",
              "value": "this.submit"
            }
          }
        }
      ]
    }
  ]
}
```

--------------------------------

### Application Configuration Example

Source: https://github.com/alibaba/lowcode-engine/blob/main/docs/docs/specs/lowcode-spec.md

Details the application's configuration, including SDK version, history mode, target root ID, layout settings, and theme information.

```json
{
  "sdkVersion": "1.0.3",
  "historyMode": "hash",
  "targetRootID": "J_Container",
  "layout": {
    "componentName": "BasicLayout",
    "props": {
      "logo": "...",
      "name": "测试网站"
    }
  },
  "theme": {
    "package": "@alife/theme-fusion",
    "version": "^0.1.0",
    "primary": "#ff9966"
  }
}
```

--------------------------------

### Global CSS Example

Source: https://github.com/alibaba/lowcode-engine/blob/main/docs/docs/specs/lowcode-spec.md

An example of global CSS styles applied to the application.

```css
body {font-size: 12px;} .table { width: 100px;}
```

--------------------------------

### CDN Options for LowCodeEngine

Source: https://github.com/alibaba/lowcode-engine/blob/main/packages/engine/README-zh_CN.md

Lists various CDN options for including LowCodeEngine and its React simulator renderer in a project. It covers alifd, uipaas, unpkg, and jsdelivr, along with instructions for self-hosting.

```html
https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.18/dist/js/engine-core.js

https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@1.0.18/dist/js/react-simulator-renderer.js
```

```html
https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/js/engine-core.js

https://uipaas-assets.com/prod/npm/@alilc/lowcode-react-simulator-renderer/1.0.18/dist/js/react-simulator-renderer.js
```

```html
https://unpkg.com/@alilc/lowcode-engine@1.0.18/dist/js/engine-core.js

https://unpkg.com/@alilc/lowcode-react-simulator-renderer@1.0.18/dist/js/react-simulator-renderer.js
```

```html
https://cdn.jsdelivr.net/npm/@alilc/lowcode-engine@1.0.18/dist/js/engine-core.js

https://cdn.jsdelivr.net/npm/@alilc/lowcode-react-simulator-renderer@1.0.18/dist/js/react-simulator-renderer.js
```

--------------------------------

### Lowcode Engine Demos

Source: https://github.com/alibaba/lowcode-engine/blob/main/docs/docs/guide/appendix/repos.md

Demonstration projects showcase the usage of the engine's orchestration and rendering modules, along with necessary dependency configurations.

```text
Demos:
- Core Engine Demo
- Code Generation Demo
```

--------------------------------

### Install LowCodeEngine

Source: https://github.com/alibaba/lowcode-engine/blob/main/packages/engine/README-zh_CN.md

Installs the LowCodeEngine package as a development dependency using npm.

```bash
npm install @alilc/lowcode-engine --save-dev
```

--------------------------------

### Install LowCodeEngine

Source: https://github.com/alibaba/lowcode-engine/blob/main/packages/engine/README.md

Installs the LowCodeEngine package as a development dependency using npm.

```bash
npm install @alilc/lowcode-engine --save-dev
```

--------------------------------

### Build for Production

Source: https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/tests/fixtures/test-cases/rax-app/demo13-datasource-prop/expected/demo-project/README.md

Builds the application for production deployment. The output will be placed in the 'build' folder.

```bash
npm run build
```

--------------------------------

### Install LowCodeEngine

Source: https://github.com/alibaba/lowcode-engine/blob/main/README-zh_CN.md

Installs the LowCodeEngine package as a development dependency using npm.

```bash
npm install @alilc/lowcode-engine --save-dev
```