Skip to main content

快速开始

Tango 是一个用于快速构建低代码平台的低代码设计器框架，借助 Tango 只需要数行代码就可以完成一个基本的低代码平台前端系统的搭建。

环境要求​

启动 Tango Playground​

  1. 克隆仓库至本地 
    git clone https://github.com/NetEase/tango.git
  2. 在 hosts 文件下添加本地开发的域名 
    127.0.0.1 local.netease.com
  3. 安装依赖并启动 Tango Playground 
    yarn install
    yarn start
  4. 打开浏览器访问 https://local.netease.com:6006 并允许不安全的证书

启动本地沙箱​

本地开发除了需要启动 Tango 的 playground 外，还需要一个可用的沙箱环境来承载设计器。

tip

沙箱部分来源于 codesandbox，不属于 tango 的核心代码库，我们在原有的 codesandbox 基础上进行了一系列的改造

如果没有可用的在线沙箱，可以通过本地启动一个沙箱来完成开发；如果已有一个在线沙箱，且沙箱与本地的 playground 共用一级域名，请直接跳至第 7 步修改 bundlerURL 为在线沙箱的地址。

  1. 克隆仓库至本地 
    git clone https://github.com/NetEase/codesandbox-client.git
  2. 修改 Caddyfile，将 :8080 修改为 playground 的域名，例如 local.netease.com
  3. 将上述域名添加至 hosts 文件 
    127.0.0.1 local.netease.com
  4. 安装依赖并构建沙箱产物 
    yarn install
    yarn build:deps
    yarn build:sandpack
    你也可以从 这里 下载预构建的沙箱产物，创建 www 子文件夹并将压缩包解压到该文件夹内
  5. 使用 Caddy 托管构建沙箱后的静态文件，若本地没有 Caddy 可前往 https://caddyserver.com/download 下载 
    caddy run
  6. 打开浏览器访问 https://local.netease.com:8443 并允许不安全的证书
  7. 修改 apps/playground/src/pages/index.tsx，找到 <Sandbox /> 组件，将 bundlerURL 修改为 https://local.netease.com:8443 
    <Sandbox bundlerURL="https://local.netease.com:8443" />
  8. 回到 playground 页面并刷新，现在 playground 将使用你指定的沙箱来运行设计器

若你本地有 Docker 也可将上述的第 4-5 步改为使用 Docker 构建镜像并启动：

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