Substrate 前端模板项目教程

1. 项目的目录结构及介绍

Substrate 前端模板项目的目录结构如下：

substrate-front-end-template/
├── .circleci/
├── .yarn/
├── public/
├── src/
│   ├── config/
│   ├── components/
│   ├── hooks/
│   ├── pages/
│   ├── App.js
│   ├── index.js
│   └── ...
├── .gitignore
├── .nvmrc
├── .prettierrc.js
├── .yarnrc.yml
├── LICENSE
├── README.md
├── config-overrides.js
├── package.json
└── yarn.lock

• .circleci/: 存放持续集成配置文件。
• .yarn/: 存放Yarn包管理器的相关文件。
• public/: 包含公共静态文件，如图片、字体等。
• src/: 源代码目录，包含所有前端代码。
  • config/: 配置文件目录。
  • components/: React组件目录。
  • hooks/: 自定义React钩子目录。
  • pages/: 页面组件目录。
  • App.js: 应用程序的主组件。
  • index.js: 应用程序的入口文件。
• .gitignore: 指定Git忽略的文件和目录。
• .nvmrc: 指定Node.js的版本。
• .prettierrc.js: Prettier代码格式化配置文件。
• .yarnrc.yml: Yarn配置文件。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文件。
• config-overrides.js: Create React App的配置覆盖文件。
• package.json: 项目依赖和脚本配置文件。
• yarn.lock: Yarn依赖锁文件。

2. 项目的启动文件介绍

项目的启动主要通过package.json中的脚本来实现。以下是几个关键的启动文件和脚本：

• package.json:

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

• start: 用于启动开发服务器，通常在本地开发环境中使用。
• build: 用于构建应用程序的生产版本，以便在服务器上部署。
• test: 用于运行测试。
• eject: 用于将Create React App从其默认的集成配置中“弹出”，以暴露其背后的webpack配置。

要启动项目，可以在项目根目录下运行以下命令：

yarn start

这将启动一个开发服务器，并默认在浏览器中打开一个新标签页，通常地址为 http://localhost:3000。

3. 项目的配置文件介绍

项目的配置文件主要集中在src/config目录下，以下是几个主要的配置文件：

• common.json: 包含所有环境共享的配置。
• development.json: 包含仅在开发环境中使用的配置。
• production.json: 包含仅在生产环境中使用的配置。

配置文件通常包含以下内容：

{
  "PROVIDER_SOCKET": "ws://localhost:9944"
}

• PROVIDER_SOCKET: 用于指定连接到Substrate节点的WebSocket地址。

在应用程序中，可以通过环境变量或配置文件中的设置来覆盖这些默认值，以便根据不同的环境进行配置。

例如，在src/config/production.json中指定生产环境的WebSocket地址：

{
  "PROVIDER_SOCKET": "wss://your-deployed-node.com"
}

确保在部署到生产环境之前更新这些配置，以指向正确的Substrate节点地址。