truffle + reactのサンプルを動かしてみた!
これベースにちょっとしたDappsを作成していけば、Reactとスマートコントラクトを同時平行に勉強できますね!
まさに一石二鳥🐦🐦react Box | Truffle Suitehttps://t.co/WHxsHu3LBK pic.twitter.com/bYyjoBN9Ea
— こじりょー | Dapps初心者 (@kojiryoinvestor) 2018年7月28日
どうもこじりょー(@kojiryoinvestor)です。
この記事では「React Box」を使ってTruffle+Reactの開発環境を爆速で作成し、サンプルを動かしてみる所までご紹介します。
Truffle+Reactを使ったDappsを作成してみたい方は一通り知っておくと開発の際に便利です。
なおこの記事では以下のツールの使い方及び設定ができている前提で進めます。
- Truffle
- Ganache
- MetaMask
以上のことがまだ準備できていない方は、下記のチュートリアルを実践することで学習することができますのでご参考ください。
React Boxとは
Reactで開発を行うときは必要なものをいくつかnpmからインストールする必要があるため、少し面倒です。
ですが「React Box」は、Truffleプロジェクト内にReactを利用したDappsを作成する上で必要なものを全て用意してくれます。
そのためTruffleとReactを組み合わせたDappsの開発環境を爆速で作成できます。
「React Box」は「Truffle Boxes」としてTruffle公式から配布されています。
React Box – https://truffleframework.com/boxes/react
スポンサーリンク
React Boxをインストールする
プロジェクトを作成する
まず「React Box」をインストールするプロジェクトディレクトリを作成します。
ここでは「react-dapps」という名前で作成しました。
mkdir react-dapps
次に作成したプロジェクトディレクトリへターミナルから移動します。
cd react-dapps
これでインストールの準備は完了です。
プロジェクトにインストールする
プロジェクトディレクトへ移動したら下記のコマンドを実行して「React Box」をインストールします。
truffle unbox react
少し時間がかかりますが「Unbox successful. Sweet!」と表示されればインストール完了です。
インストールが完了するとプロジェクトディレクトリに以下のようなファイル等が作成されています。
React Boxのサンプルを動かす
プライベートネットへデプロイ
「React Box」はインストールが完了した時点で簡単なサンプルが動かせる状態になっています。
サンプルを動かすために、まずプライベートネットワークを構築しておきましょう。
ここでは「Ganache」を利用してプライベートネットワークを構築しています。
次に「Truffle.js」内のコードを以下のようにして、プライベートネットへ接続する設定をします。
プライベートネットの準備が整ったら、下記のコマンドを実行してコントラクトをビルドします。
truffle compile
コンパイルに成功したら下記のコマンドを実行してコントラクトをプライベートネットへデプロイします。
truffle migrate
下記のように出力されればデプロイ成功です。
サンプル「SimpleStorage」の起動
コントラクトのデプロイが完了したらサンプルを起動しましょう。
プロジェクトディレクトリで下記のコマンドを実行するとサンプルが起動します。
npm run start
サンプル内容はコントラクトに渡された数値を保存して、保存された数値を「The stored value is : 数値」という形で表示するものです。
サンプルを動かすために、まずMetaMaskをプライベートネットへ接続しておきます。
MetaMaskの準備ができたら次に「App.js」をエディタで開きます。
「App.js」は「src」ディレクトリの配下にあります。
「App.js」を開いたら59行目のコードをまで移動します。
あとは「set()」中の5という数字を好きな数字に変更して保存してみましょう。
ここでは9999という数字に変更しました。
数字を変更するとフロントエンド側も数字が変更されます。
Reactのビルド
フロントエンドのデプロイ
コントラクトはテストネット及びメインネットにデプロイすることで全世界に公開することができます。
しかし、Reactで作成したフロントエンドのコードはこのままではサーバー等にデプロイすることができません。
そこでReactもビルドをする必要があります。
Reactをビルドするには下記のコマンドを実行します。
npm run build
上記のコマンドを実行するとReactのビルドが実行されます。
ビルドに成功すると「build_webpack」ディレクトリが自動で作成され、その中にあるファイルをサーバー等にデプロイすることで全世界に公開することができます。
ビルドされたコードをローカルで確認する
フロントエンドをデプロイする前に、ビルドされたフロントエンドが正常に表示されるかローカルで確認したいです。
そんな時は「pushstate-server」を利用することで確認することができます。
まずは下記のコマンドで「pushstate-server」をインストールします。
npm install -g pushstate-server
「pushstate-server」をインストールしたら、プロジェクトディレクトリで下記のコマンド実行すれば「build_webpack」をルートディレクトリとしたフロントエンドが表示されます。
pushstate-server build_webpack 9000
おわりに
この記事では紹介しませんでしたが、「React Box」ではフロントエンド側のテストも実行できます。
フロントエンドの開発からテストにデプロイまで。
Reactを使ったDappsを作成するなら「React Box」を利用することで爆速な開発ができますので、その際はぜひ試してみてはいかがでしょうか?
それでは、こじりょー(@kojiryoinvestor)でした!
コメントを残す