プロジェクトの初期設定
目次 [hide]
いよいよ、HashLipsの3つ目のプロジェクト、nft_minting_dappを使ったアプリケーションの作成を行っていきます。
VSCodeでプロジェクトを開く
VSCodeを起動してツールバーの「File」>「Open」を選択してください。
今回はコントラクトの作成ということで「hashlips_minting_dapp」を使用していきます。一番最初にダウンロードした「hashlips_minting_dapp-X.X.X」フォルダを選択して「開く」を選択しましょう。
VSCodeの「EXPLORER」に各種ファイルが表示されればOKです。
パッケージのインストール
ツールバーの「Terminal」>「New Terminal」より、ターミナルビューを開きましょう。hashlips_art_engineと同様に、以下のコマンドを入力して関連するパッケージをインストールしておきます。
$ npm install
しばらくイントールのログが表示されますが、ある程度待ってログが止まればOKです。
added 2157 packages, and audited 2158 packages in 59s
開発サーバの起動
続いて、お手元のPC内でWebページの挙動を確認するために「開発サーバ」を起動します。
ターミナルで以下のコマンドを実行してください。
$ npm run start
しばらく待って以下のようなログが表示されれば起動完了です。
Compiled successfully!
You can now view hashlips_nft_minting_dapp in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.1.52:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
環境によっては自動でブラウザでWebページが開かれますが、もし開かれない場合はhttp://localhost:3000 にアクセスしてみましょう。
以下のような画面が表示されていればOKです！
開発中は基本的にサーバは起動したままにしておくことで変更がリアルタイムで確認できます。
仮にPCやVSCodeを再起動した場合には必ずnpm run startを実行して、起動状態に戻しておきましょう！