import Link from '@docusaurus/Link';
# 快速开始
Tango 是一个用于快速构建低代码平台的低代码设计器框架，借助 Tango 只需要数行代码就可以完成一个基本的低代码平台前端系统的搭建。
:::warning 测试版免责声明
当前开源版本为低代码引擎的 beta 演示版本，API 可能不稳定，不建议在生产环境中使用。为了保障社区版本能够有效与内部版本解藕，并且项目开源涉及到大量的额外的代码分离工作，我们预计在 2023 年 Q4 发布可以运行在生产环境的正式版。
:::
## 环境要求
- 安装 node 16.0.0 以上版本:
- 安装 npm 8.x 或 yarn 1.x:
## 启动 Tango Playground
1. 克隆仓库至本地
```sh
git clone https://github.com/NetEase/tango.git
```
2. 在 hosts 文件下添加本地开发的域名
```hosts
127.0.0.1 local.netease.com
```
3. 安装依赖并启动 Tango Playground
```sh
yarn install
yarn start
```
4. 打开浏览器访问 并允许不安全的证书
## 启动本地沙箱
本地开发除了需要启动 Tango 的 playground 外，还需要一个可用的沙箱环境来承载设计器。
:::tip
沙箱部分来源于 codesandbox，不属于 tango 的核心代码库，我们在原有的 codesandbox 基础上进行了一系列的改造
:::
如果没有可用的在线沙箱，可以通过本地启动一个沙箱来完成开发；如果已有一个在线沙箱，且沙箱与本地的 playground 共用一级域名，请直接跳至第 7 步修改 `bundlerURL` 为在线沙箱的地址。
1. 克隆仓库至本地
```sh
git clone https://github.com/NetEase/codesandbox-client.git
```
2. 修改 `Caddyfile`，将 `:8080` 修改为 playground 的域名，例如 `local.netease.com`
3. 将上述域名添加至 hosts 文件
```hosts
127.0.0.1 local.netease.com
```
4. 安装依赖并构建沙箱产物
```sh
yarn install
yarn build:deps
yarn build:sandpack
```
你也可以从 [这里](https://github.com/NetEase/codesandbox-client/releases) 下载预构建的沙箱产物，创建 `www` 子文件夹并将压缩包解压到该文件夹内
5. 使用 Caddy 托管构建沙箱后的静态文件，若本地没有 Caddy 可前往 下载
```sh
caddy run
```
6. 打开浏览器访问 并允许不安全的证书
7. 修改 `apps/playground/src/pages/index.tsx`，找到 `` 组件，将 `bundlerURL` 修改为 `https://local.netease.com:8443`
```jsx
```
8. 回到 playground 页面并刷新，现在 playground 将使用你指定的沙箱来运行设计器
若你本地有 Docker 也可将上述的第 4-5 步改为使用 Docker 构建镜像并启动：
```sh
docker build -t tango-codesandbox .
docker run -p 8443:8443 tango-codesandbox
```