This post is also available in: English-US (英語)
truffleのreact-boxを使うと、お手軽にイーサリアムのスマートコントラクトを使ったブロックチェーンだぜ的なアプリ開発を、reactのUIで体験できるらしいので、やってみたら、落とし穴がいくつかありましたので、メモ代わりに書いています。
GitHubの truffle-box/react-box のチュートリアルをベースに進めましたが、いくつか修正しないとアプリが動きませんでした。
環境はWindows7 64bitです。
truffleをインストールするため以下のコマンドを入力。
npm install -g truffle
プロジェクトルートフォルダにて以下のコマンドを入力。
react-boxのデータが展開されます。
truffle unbox react
同じくプロジェクトルートフォルダにて以下のコマンドを入力。
compile,migrateはtruffle developを打った後にコマンド入力待ちになるので、その状態で入力してます。
Windowsでは、コマンドプロンプトでなく、Git Bashなどを利用する事をお勧めします。
truffle develop compile migrate
(チュートリアルにはないので手順が正しいかは知りません)
truffle developを打ったコマンドプロンプト(もしくはGit Bashなど)とは別のコマンドプロンプトを立ち上げて以下のコマンドを入力。
bignumber.js がないですよってエラーが出た場合の対処方法です。
cd client npm install --save bignumber.js
(チュートリアルにはないので手順が正しいかは知りません)
truffle developを走らせると、buildフォルダ以下にcontractsフォルダができてますので、そのcontractsフォルダをclient/srcフォルダ以下にコピーします。
以下のようなエラーが出た場合の対処方法です。
Module not found: Can't resolve './contracts/SimpleStorage.json' in '....../client/src/App.js'
最後に以下のコマンドを打つと、ブラウザが立ち上がり、App.jsの内容が走ります。
cd client npm run start
ブラウザで「App.jsのこの行数を修正したら値変わるよ」と書いてますが、行数が違います。
以下のコード部分の 5 を好きな値に変えてください。
// Stores a given value, 5 by default.
await contract.set(5, { from: accounts[0] });