ベースプロジェクトを作成しよう
このセクションの全体像は次のとおりです。
- ベースとなる
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ディレクトリが見えるでしょうか。
それぞれフロントエンドを構成するコードのファイル、コントラクトを構成するコードのファイルが入っています。