truffle:Try Ethereum Sample Dapp by Using React-box

Published on:
Last updated:

This post is also available in: 日本語 (Japanese)

By using react-box of truffle-box, it is easy to develop Smartcontract Dapp on Ethereum.
But I faced to some problems along with react-box tutorials, so made a note.

Install truffle globaly.

npm install -g truffle

At project folder.

truffle unbox react

Also enter the following command in the project root folder.
After running "truffle develop" command, since it waits for command input, continue to input "compile" and "migrate".
When using Windows, I recommend to use "Git Bash" not "Command Prompt".

truffle develop
compile
migrate

(I do not know if this procedure is correct as it is not in the tutorial.)
Launch another console(Git Bash etc...), and enter the following command.
This is how to deal with an error when not found "bignumber.js".

cd client
npm install --save bignumber.js

(I do not know if this procedure is correct as it is not in the tutorial.)
After you run "truffle develop", the "contracts" folder is created under the "build" folder, so copy the "contracts" folder below the "client/src" folder.
This is how to deal with an error like the following.

Module not found: Can't resolve './contracts/SimpleStorage.json' in '....../client/src/App.js'

Finnaly, enter the following command, then launched browser and run "App.js".

cd client
npm run start

If you want to change default value, change the following part at "App.js".

// Stores a given value, 5 by default.
await contract.set(5, { from: accounts[0] });

No tags for this post.

About
Kuniyoshi Takemoto is the founder of Amelt.net LLC, and editor of this blog(www.amelt.net).Learn more and follow me on LinkedIn.