1. 首页 > 快讯  > Econia参考前端的使用指南

Econia参考前端的使用指南

原文作者 | Econia

编译 | 比特币行情网 范佳宝

前置条件及安装介绍

在本教程,你将学会:

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 托管的页面!