Econia参考前端的使用指南

原文作者 | Econia

编译 | Odaily星球日报 范佳宝

前置条件及安装介绍

在本教程，你将学会：

1. 复制 Econia 参考前端

2. 在本地运行前端

3. 在 Vercel 上部署前端

前提：

1. VSCode, terminal，或者你喜欢的代码编辑器

2.已经安装 pnpm

第 1 步：克隆 Econia 前端 Github repo

我们可以使用 git 命令克隆该 repo，将其 fork 到自己的 GitHub 账户，或者直接下载压缩包。

不知道如何复制 repo 的话，不妨看看 Github 上的指南。

第 2 步（可选）： 设置 TradingView 软件的 repo

默认情况下，Econia 参考前端中的 K 线功能依赖于封闭源的 TradingView 高级图表库。如果您无法访问私有存储库，则 K 线功能将依赖于开放源代码的轻量级图表存储库。

TradingView 高级图表库是 Econia 参考前端的一个子模块，用于显示特定市场的 K 线图。它初始被设置在 src/frontend/public/static 。

从本质上讲，将 TradingView 添加为子模块会克隆 TradingView 资源库并将其构建为静态文件。因此，您需要拥有 TradingView 资源库的访问权限。

要获得访问权限，您必须联系 TradingView 团队并等待批准。

步骤 3 ：打开你 econia-frontend 的 fork

首先查看代码的架构。您可以在此处查看每个页面和视图的组件和文件图：

第 4 步：在本地运行项目

1.导航至前端文件夹：

cd src/frontend

2.使用 pnpm 安装依赖项：

pnpm i

3.将 .env.example 复制到 .env.local：

cp -R.env.example.env.local

如果查看 .env 文件，您可能会注意到 REST URL 的环境变量设置为 https://aptos-testnet-econia.nodeinfra.com/。这是因为 Nodeinfra 运行着 Econia DSS 的社区部署，为 Econia 参考前端数据提供数据馈送。

 变量名和其含义的对照

4.运行开发服务：

pnpm run dev

这样就可以在浏览器中打开 http://localhost:3000，看到本地版本的前端。

在 Vercel 上部署的步骤

Vercel 是一个用于前端开发和部署的用户友好型云平台。它通过自动化基于 Git 的部署和无服务器功能简化了部署流程。

前提：

1.Github 账户

2.Github 访问令牌

为了生成 GITHUB_ACCESS_TOKEN，你需要：

1.转至 https://github.com/settings/tokens/new

2.提供描述性说明

3.在有效期选择框中，选择“无有效期”

4.在 "选择范围 "部分，点击 "版本库 - 私有版本库的完全控制"，选择与版本库相关的所有选项

5.点击生成令牌

6.将生成的令牌复制到 Vercel 环境变量，并命名为 GITHUB_ACCESS_TOKEN

步骤 1 ：登录 Vercel

步骤 2 ：创建 Vercel 项目

导入项目：在屏幕上单击 "添加新项目 "按钮，然后选择 "项目 "创建新项目，或点击 "导入项目 "导入 Github 仓库。

Vercel 网站会显示 Github 账户中的软件源列表。然后点击 econia-frontend 资源库上的导入按钮。

步骤 3 ：配置项目

项目名称： 项目名称是自动生成的，可以根据需要更改。

框架预设： 由于上述路径下的目录是 NextJS 项目，因此 Vercel 会自动检测其框架预设为 NextJS。

根目录： 在根目录字段，点击旁边的编辑按钮。这时会弹出一个模态窗口，让你选择源代码所在的目录。然后，您必须选择路径 econia-frontend/src/frontend，然后单击 "继续"。

编译和输出设置： 用以下操作重新设置安装命令：

环境准备：要在 Vercel 上进行部署，您需要设置以下环境变量：

变量名和其含义的对照

注意：如果无法访问私有 TradingView 子模块，则将 TRY_CLONING_TRADINGVIEW 设置为 "1 "以外的任意值。

环境变量： 将 .env.local 或 .env.example 文件中的所有环境变量粘贴到表格中。

小贴士：您无需每次复制并粘贴每个变量，只需复制您的文件并粘贴到输入框中即可。

第 4 步：部署项目

单击 "部署 "按钮，等待几分钟并查看结果。

小贴士：如果您无法访问私有 TradingView 子模块，可能会看到以下错误，但网站仍会使用开源回退部署。

恭喜您！然后，您将进入 Vercel 托管的页面！