《Substrate 前端模板项目安装与配置指南》

1. 项目基础介绍

本项目是一个基于Substrate的开发模板，旨在帮助开发者快速构建连接到Substrate节点的React前端应用。它使用最新的JavaScript语言特性，通过Polkadot JS API与Substrate后端进行通信。

主要编程语言：JavaScript、HTML、CSS

2. 项目使用的关键技术和框架

• React：用于构建用户界面的JavaScript库。
• Polkadot JS API：用于与Substrate节点交互的JavaScript库。
• Create React App：一个用于快速启动React应用的工具。
• Yarn：JavaScript项目的包管理工具。

3. 项目安装和配置的准备工作

在开始之前，请确保您的系统中已安装以下工具：

• Node.js：JavaScript运行环境，建议使用LTS版本。
• Git：版本控制系统，用于克隆项目代码。
• Yarn：项目依赖管理工具。

详细安装步骤

1. 克隆项目代码

   打开终端或命令提示符，执行以下命令克隆项目代码：

   git clone https://github.com/jimmychu0807/substrate-front-end-template.git
   cd substrate-front-end-template
   

2. 安装项目依赖

   在项目目录中，使用Yarn安装所需的依赖：

   yarn install
   

3. 启动开发服务器

   安装完依赖后，启动开发服务器以在本地查看应用：

   yarn start
   

   运行上述命令后，开发服务器会启动，并且应用将在默认的网络浏览器中打开。

4. 构建生产版本

   当你准备将应用部署到生产环境时，运行以下命令来构建应用的生产版本：

   yarn build
   

   构建完成后，将在build目录生成应用的静态文件。

5. 配置WebSocket连接

   为了连接到Substrate节点，你需要在配置文件中指定WebSocket地址。打开src/config/production.json文件，并设置PROVIDER_SOCKET的值为你部署的节点的WebSocket地址。

   {
     "PROVIDER_SOCKET": "ws://your-substrate-node:9944"
   }
   

6. 环境变量

   如果需要，你还可以通过环境变量来覆盖配置文件中的设置。例如，设置REACT_APP_PROVIDER_SOCKET环境变量以覆盖PROVIDER_SOCKET配置。

   REACT_APP_PROVIDER_SOCKET=ws://your-substrate-node:9944 yarn build
   

按照以上步骤操作，你将能够成功安装和配置Substrate前端模板项目，开始开发你的Substrate前端应用。