Chapter 08無料公開

Hello NEAR 3 - parcel -

masa
masa
2022.08.20に更新

parcel概要

前の章で作成したHello NEARのフロントエンド側で利用されているparcelの使い方を学びます。

parceとは

Parcelは、Javascriptのモジュールバンドラです。
設定ファイルなしでbuildできるので、ちょっとしたコードを書いてbuildしたい時の便利なツールです。

https://parceljs.org/

コードリーディング

yarn startで実行される処理を順に確認していきます。

yarn start

yarn startを実行した時のコンソールを見てみましょう。

bash
Server running at http://localhost:1234

portが1234でサーバーが立ち上がっています。

Parcelを動かしている部分のscriptを見ると

bash
npm run deploy && echo The app is starting! It will automatically open in your browser when ready && env-cmd -f ./neardev/dev-account.env parcel frontend/index.html --open

となっています。

まず注目すべきは

bash
env-cmd -f ./neardev/dev-account.env

の部分です。

これは環境変数を読み込んでいます。

neardev/dev-account.envは開発環境(testnet)へのdeploy時に自動で作成されたアカウントです。

つまり

bash
near dev-deploy

を実行することで作成されます。

次が

bash
parcel frontend/index.html --open

の部分です。

これはparcel CLIで開発用サーバーを動かしています。

今回のサンプルの実行は、最初で説明した通りdockerのポートフォワーディングを使っています。

なので、コンテナ内のhostは0.0.0.0にする必要があります

parcelでhostを指定するには

--host

オプションを利用します。

デフォルトで記述されているyarn startではスマートコントラクトのdeploy作業まで含まれてしまっているので、reactを起動するだけのscriptを追加します。

package.jsonに以下を追記します。

package.json
"scripts": {
  "hello": "env-cmd -f ./neardev/dev-account.env parcel frontend/index.html --host 0.0.0.0"
}

記載したらこのコマンドを実行してみましょう。

bash
yarn hello
yarn run v1.22.19
$ env-cmd -f ./neardev/dev-account.env parcel frontend/index.html --host 0.0.0.0
Server running at http://0.0.0.0:1234
✨ Built in 2.46s
bash
http://localhost:1234

bash
http://0.0.0.0:1234

に変わっています。

dockerのポートフォワーディングでlocalhost:3000を設定しているので、ブラウザからlocalhost:3000を叩いて画面を確認します。

画面が確認できました。

まとめ

Hello NEARのフロントエンド側のyarn start処理をコードリーディングすることで、環境変数の扱い方とpercelの使い方を学びました。

これでいつでもフロントエンドのサーバーを立ち上げることができます。

次はスマートコントラクトの呼び出し部分のコードリーディングの解説をします。