ベースプロジェクトを作成しよう
このセクションの全体像は次のとおりです。
- ベースとなる
dappプロジェクト
を作成する - バイクを管理するコントラクトを作成する
- フロントエンドからコントラクトにアクセスする
🥮 dappプロジェクト
を作成しよう
create-near-app
というパッケージを利用して、ベースとなるdappプロジェクト
を作成することができます。
あなたの作業したいディレクトリへ移動して以下のコマンドを実行しましょう!
- フロントエンド作成に
react
、コントラクト作成 にrust
を使用することを明示してます- 本手順作成時点での安定版
3.1.0
バージョンを利用しています。- プロジェクト名はお好きな名前で良いですが、ここでは
near_bike_share_dapp
と して進めていきます 🚀
$ npx create-near-app@3.1.0 --frontend=react --contract=rust near_bike_share_dapp
実行後、必要なパッケージのインストール許可を求められるのでenterを押します。 成功すると以下のような表示がされます。
作成したリポジトリへ移動し、yarn dev
を実行しましょう!
yarn
をお持ちでない方は以下のコマンドでインストールしてください。$ npm install -g yarn
実行環境のバージョンは以下です。
$ yarn -v
1.22.19
$ cd near_bike_share_dapp
$ yarn dev
しばらく待つとあなたのローカル環境で、Webサイトのフロントエンドが立ち上がりましたか?
ローカル環境で表示されているWebサイト。
サインインボタンを押して、既存のアカウントでサインインしてみましょう。
接続完了したらこのようなサイトが表示されるはずです。
上記のような形でフロントエンドが確認できれば成功です。
終了する時はターミナルで以下のコマンドが使えます。
- Mac:
ctrl + c
- Windows:
ctrl + shift + w
最後に作成したnear_bike_share_dapp
のフォルダ構成を確認しましょう。
ディレクトリには末尾に/
をつけて 表示しています。
near_bike_share_dapp/
├── README.md
├── ava.config.cjs
├── contract/
├── dist/
├── frontend/
├── integration-tests/
├── neardev/
├── node_modules/
├── out/
├── package.json
└── yarn.lock
frontend
とcontract
ディレクトリが見えるでしょうか。
それぞれフロントエンドを構成するコードのファイル、コントラクトを構成するコードのファイルが入っています。