「truffle unbox drizzle」を実行すると、スマートコントラクトを開発するための truffle プロジェクト、フロントエンドを開発するための drizzle(+React) の雛形を生成することができます。雛形は既に動作しますので、そこに変更を加えることで、独自の DApps を開発していきます。(もちろん手動で各種ファイルを作成していく方法も可能です。)

> npm install create-react-app
> mkdir my_drizzle
> cd my_drizzle
> create-react-app .
> npm install --save @drizzle/react-plugin @drizzle/store

Windows の場合です。

Windows10にてNode環境構築によくあるエラー

> mkdir drizzle_project
> cd drizzle_project
> truffle unbox drizzle

生成された「truffle-config.js」は古い形式であるため、「develop:」を「development:」に修正します。 また、使用する ethereum ブロックチェーンによって host と port も変更します。

const path = require("path");
 
module.exports = {
  // See <http://truffleframework.com/docs/advanced/configuration>
  // to customize your Truffle configuration!
  contracts_build_directory: path.join(__dirname, "app/src/contracts"),
  networks: {
    development: { // default with truffle unbox is 7545, but we can use develop to test changes, ex. truffle migrate --network develop
      host: "127.0.0.1",
      port: 8545,
      network_id: "*"
    }
  }
};

まずは drizzle_project ディレクトリの直下で npm パッケージをインストールします。

drizzle_project> npm install

続いて、drizzle_project/app ディレクトリ直下で npm パッケージをインストールします。

drizzle_project/app> npm install

drizzle_project ディレクトリの直下で以下を実行します。

drizzle_project> truffle migrate

drizzle_project/app ディレクトリ直下で以下を実行します。

drizzle_project/app> npm start

ブラウザが起動してデモが動作しているはずです。