truffle react环境搭建

1. 环境(windows 10)

F:\react>truffle.cmd version
Truffle v4.1.14 (core: 4.1.14)
Solidity v0.4.24 (solc-js)

F:\react>npm -v
6.4.1

F:\react>node -v
v10.14.1

F:\react>python --version
Python 2.7.15

F:\react>node-gyp -v

F:\react>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_
modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" -v )
 else (node "" -v )
v3.8.0

注意node-gyp目前只支持python 2.7.*版本

2.安装

新建工程文件夹(react),cd到react文件夹下

truffle unbox react

安装失败处理
2.1 没有window构建工具

npm install --global --production windows-build-tools

2.2 没有gyp工具

npm install -g node-gyp

2.3 尝试把python升到2.7.x的最新版
2.4 再不行看看文档
https://github.com/nodejs/node-gyp

3 启动truffle react

https://truffleframework.com/boxes/react
3.1 编译智能合约

truffle.cmd develop
compile
migrate

3.2 打开新的终端,cd到react下的client文件下启动项目
(react项目已经被移动到client文件夹下,注意,这里与官网文档不一致,官网文档没有及时更新)

npm run start

至此项目运行成功
当然网页是会有弹窗

因为项目中使用的合约是使用truffle部署在自己的devlop网络的合约,我们的钱包并没有监听这个网络,

• 先用remix将合约部署在Kovan 测试网络上

• 将合约地址告诉web3(在app.js 取合约对象的代码中)

const instance = await Contract.at("XXXXXXXXXXXXXXXXXXXXXXXX");

• 保存刷新,大功告成