Truffle＋React環境を爆速作成！「React Box」を動かしてみる

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をインストールする

プロジェクトを作成する

まず「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」を開いたら５９行目のコードをまで移動します。

あとは「set()」中の５という数字を好きな数字に変更して保存してみましょう。

ここでは９９９９という数字に変更しました。

数字を変更するとフロントエンド側も数字が変更されます。

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）でした！