07.truffle集成react安装以及配置教程

truffle有很多预置的项目，这些项目大多集成了前端模块，使得我们可以迅速进行二次开发。
那么，我开始记录truffle内置项目react安装的目录
注意：首先你要有node环境，懂了吗？然后你要有truffle环境

1.unbox命令

我们使用unbox命令进行内置模块的下载

2.开始集成react

• 创建一个新的目录（名字随意起，但是内容必须为空）
• 切换到目录
• 执行安装命令

truffle unbox react

下载资源的时间比较久，所以慢慢等待吧。 等的时候可以玩手机

2.检查是否有contracts

因为版本原因，需要检查下 cd client/src，如果没有，则需要处理，window直接复制cond到里面，ios需要

 ln -s ../../build/contracts contracts

3.退回react根目录

执行

truffle develop

记录下助记词

4.修改port映射文件 truffle-config.js

module.exports = {
    networks: {
        development: {
            host: "localhost",
            port: 9545,
            network_id: "*" // 匹配任何network id
        }
    }
};

以实际自己的启动端口为标准

5.compile 编译

• 是否报错

6.migrate 迁移部署

• 是否报错

7.启动react

如果上面执行正常，开始启动react服务，切记，是切换到client文件下，不是在根目录中

cd client
npm run start

8.配置metaMask

• 导入助记词
• 切换到私有端口
• 加载数据
• 测试是否正常

9.其他根据业务需求进行更改

10.备注：

Unexpected end of JSON input while parsing near '...gistry.npmjs.org/glob'

重新建立空项目：ng new 项目名称 --skip-install

2、进入你的项目目录：cd 项目名称

3、重新设置链接：npm set registry https://registry.npmjs.org/

4、重置cache：npm cache clean --force

5、安装模块包：npm install

6、如果失败重新运行：4、5

7、启动服务：ng serve

8、测试网页：打开浏览器，输入http://localhost:4200