Skip to main content

Quick Start

Tango is a front-end framework for quickly building low-code tools. With Tango, you can quickly build a basic low-code designer with just a small amount of code. This article will help you use Tango to implement a basic low-code visual designer.

Disclaimer

The low-code platform based on the Tango low-code engine has already served many internal business development scenarios within NetEase Cloud Music. Due to the large amount of code separation work involved in open source work, the current open source version is an alpha demo version of the low-code engine, and the API may be unstable. It is not recommended to use it in a production environment. We expect to release a production-ready version in Q4 2023.

Environment​

Start Tango Playground​

  1. clone the repository
    git clone https://github.com/NetEase/tango.git
  2. add the local development domain to the hosts file.
    127.0.0.1 local.netease.com
  3. install dependencies and run the Tango Playground
    yarn install
    yarn start
  4. open your browser to run https://local.netease.com:6006 , should allow insecure certificates.

Run the local sandbox​

In addition to starting the playground of Tango, local development also requires a usable sandbox environment to host the designer.

If there is no available online sandbox, you can complete the development by starting a sandbox locally; if there is already an online sandbox and the sandbox shares the top-level domain name with the local playground, please directly jump to step 7 and modify bundlerURL to the address of the online sandbox.

  1. clone the repository
    git clone https://github.com/NetEase/codesandbox-client.git
  2. update Caddyfile，change :8080 to the domain name of playground app，e.g. local.netease.com
  3. add the domain names to the hosts file
    127.0.0.1 local.netease.com
  4. install dependencies and build the sandbox
    yarn install
    yarn build:deps
    yarn build:sandpack
    Or you can download prebuild assets from releases. Create a folder www next to Caddyfile, and extract compressed tarball into www/.
  5. If you do not have Caddy locally, you can go to https://caddyserver.com/download to download it.
    caddy run
  6. Open your browser to visit https://local.netease.com:8443 , also allow insecure certificates
  7. update apps/playground/src/pages/index.tsx, find <Sandbox /> component, change bundlerURL to https://local.netease.com:8443
    <Sandbox bundlerURL="https://local.netease.com:8443" />
  8. Go back to the playground page and refresh. Now, the playground will use the sandbox you specified to run the designer.

If you have Docker locally, you can modify steps 4-5 above to use Docker to build and launch the image.

docker build -t tango-codesandbox .
docker run -p 8443:8443 tango-codesandbox