import Link from '@docusaurus/Link';

# 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.

:::warning 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

- Install node >= 16.0.0 : <https://nodejs.org/en/download/>
- Install npm 8.x or yarn 1.x: <https://classic.yarnpkg.com/en/docs/getting-started>

## Start Tango Playground

1.  clone the repository
    ```sh
    git clone https://github.com/NetEase/tango.git
    ```
2.  add the local development domain to the hosts file.
    ```hosts
    127.0.0.1 local.netease.com
    ```
3.  install dependencies and run the Tango Playground
    ```sh
    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
    ```sh
    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
    ```hosts
    127.0.0.1 local.netease.com
    ```
4.  install dependencies and build the sandbox
    ```sh
    yarn install
    yarn build:deps
    yarn build:sandpack
    ```
    Or you can download prebuild assets from [releases](https://github.com/NetEase/codesandbox-client/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.
    ```sh
    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`
    ```jsx
    <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.

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