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");

• 儲存重新整理,大功告成