课程目标
- react-box 项目构建
- 项目编译、部署到Ganache网络
- Metamask钱包链接Ganache网络
- Metamask钱包导入Ganache第一个钱包的私钥
- 运行DAPP
Demo效果图
1. react-box 项目构建
localhost:ReactDapp liyuechun$ truffle unbox react-box
Starting unbox...
=================
✔ Preparing to download box
✖ Downloading
Unbox failed!
RequestError: Error: connect ECONNREFUSED 0.0.0.0:443
at new RequestError (/usr/local/lib/node_modules/truffle/build/webpack:/node_modules/request-promise-core/lib/errors.js:14:1)
at Request.plumbing.callback (/usr/local/lib/node_modules/truffle/build/webpack:/node_modules/request-promise-core/lib/plumbing.js:87:1)
at Request.RP$callback [as _callback] (/usr/local/lib/node_modules/truffle/build/webpack:/node_modules/request-promise-core/lib/plumbing.js:46:1)
at self.callback (/usr/local/lib/node_modules/truffle/build/webpack:/node_modules/request/request.js:185:1)
at Request.emit (events.js:189:13)
at Request.onRequestError (/usr/local/lib/node_modules/truffle/build/webpack:/node_modules/request/request.js:881:1)
at ClientRequest.emit (events.js:189:13)
at TLSSocket.socketErrorListener (_http_client.js:392:9)
at TLSSocket.emit (events.js:189:13)
at emitErrorNT (internal/streams/destroy.js:82:8)
at emitErrorAndCloseNT (internal/streams/destroy.js:50:3)
at process._tickCallback (internal/process/next_tick.js:63:19)
Truffle v5.1.29 (core: 5.1.29)
Node v10.15.3
如上所示,有时执行unbox命令时会报错,解决办法如下:
- 打开https://github.com/googlehosts/hosts链接,下载
demo
,拷贝解压文件夹里面的hosts
文件。 - 打开终端,输入
open /etc
- 将
hosts
粘贴到etc
文件夹,替换掉原来的hosts
文件。
localhost:ReactDapp liyuechun$ truffle unbox react-box
Starting unbox...
=================
✔ Preparing to download box
✔ Downloading
✔ cleaning up temporary files
✔ Setting up box
Unbox successful, sweet!
Commands:
Compile: truffle compile
Migrate: truffle migrate
Test contracts: truffle test
Test dapp: cd client && npm test
Run dev server: cd client && npm run start
Build for production: cd client && npm run build
2. 项目编译、部署到Ganache网络
- 第一步:打开Ganache私有链
- 编译
localhost:ReactDapp liyuechun$ truffle compile Compiling your contracts... =========================== > Compiling ./contracts/Migrations.sol > Compiling ./contracts/SimpleStorage.sol > Artifacts written to /Users/liyuechun/Desktop/demo/ReactDapp/client/src/contracts > Compiled successfully using: - solc: 0.5.16+commit.9c3226ce.Emscripten.clang
- 将合约部署到Ganache私有网络
localhost:ReactDapp liyuechun$ truffle migrate
Starting migrations...
======================
> Network name: 'ganache'
> Network id: 5777
> Block gas limit: 6721975 (0x6691b7)
1_initial_migration.js
======================
Deploying 'Migrations'
----------------------
> transaction hash: 0x90d4600102a388b768aff520f9addc189e3e02d66e735bc5595bae176e0698ae
> Blocks: 0 Seconds: 0
> contract address: 0xCA6B936fd9f3CF0bE4187e1fBec9Dc5eBd48fDA1
> block number: 6
> block timestamp: 1593833525
> account: 0xB4375CC6E33B2823008fF0e5884d97dcB4488755
> balance: 99.98928758
> gas used: 164163 (0x28143)
> gas price: 20 gwei
> value sent: 0 ETH
> total cost: 0.00328326 ETH
> Saving migration to chain.
> Saving artifacts
-------------------------------------
> Total cost: 0.00328326 ETH
2_deploy_contracts.js
=====================
Deploying 'SimpleStorage'
-------------------------
> transaction hash: 0x65b79e14b446fe337d2e84e34e839989fef4b7f02e3b802ef63b4429eb98d44f
> Blocks: 0 Seconds: 0
> contract address: 0xF83Bb3a9Ceb47bC536E2f6f4C243b8dC994cF7cB
> block number: 8
> block timestamp: 1593833525
> account: 0xB4375CC6E33B2823008fF0e5884d97dcB4488755
> balance: 99.98651698
> gas used: 96189 (0x177bd)
> gas price: 20 gwei
> value sent: 0 ETH
> total cost: 0.00192378 ETH
> Saving migration to chain.
> Saving artifacts
-------------------------------------
> Total cost: 0.00192378 ETH
Summary
=======
> Total deployments: 2
> Final cost: 0.00520704 ETH
3. Metamask钱包链接到Ganache网络
- (1)Metamask里面选择自定义RPC
- (2)网络名称:Ganache网络
- (3)新增 RPC URL:http://127.0.0.1:7545
- (4)保存即可
4. Metamask钱包导入Ganache第一个钱包的私钥
如上所示,拷贝钱包私钥,导入账号即可。
5. 运行DAPP
localhost:client liyuechun$ npm run start
Compiled successfully!
You can now view client in the browser.
Local: http://localhost:3000/
On Your Network: http://192.168.1.106:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.
最新评论