Drizzle Truffle Box

This box comes with everything you need to start using smart contracts from a react app with Drizzle. It includes drizzle, drizzle-react and drizzle-react-components to give you a complete overview of Drizzle's capabilities.

Installation

First ensure you are in a new and empty directory.

1. Run the unbox command via npx and skip to step 3. This will install all necessary dependencies. A Create-React-App is generated in the app directory.

   npx truffle unbox drizzle

2. Alternatively, you can install Truffle globally and run the unbox command.

   npm install -g truffle
   truffle unbox drizzle

3. Run the development console.

   truffle develop

4. Compile and migrate the smart contracts. Note inside the development console we don't preface commands with truffle.

   compile
   migrate

5. In the app directory, we run the React app. Smart contract changes must be manually recompiled and migrated.

   // in another terminal (i.e. not in the truffle develop prompt)
   cd app
   npm run start

6. Truffle can run tests written in Solidity or JavaScript against your smart contracts. Note the command varies slightly if you're in or outside of the development console.

   // inside the development console
   test
   
   // outside the development console
   truffle test

7. Jest is included for testing React components. Compile your contracts before running Jest, or you may receive some file not found errors.

   // ensure you are inside the app directory when running this
   npm run test

8. To build the application for production, use the build script. A production build will be in the app/build folder.

   // ensure you are inside the app directory when running this
   npm run build

FAQ

• Where do I find more information about Drizzle?

  Check out our documentation or any of the three repositories (drizzle, drizzle-react, drizzle-react-components).

• Where is my production build?

  The production build will be in the app/build folder after running npm run build in the app folder.

• Where can I find more documentation?

  This box is a marriage of Truffle and a React setup created with create-react-app. Either one would be a great place to start!

• How does the provider work in this box?

  This box uses a custom provider, which does not interact with MetaMask. Keep an eye on this space, as this will be updated once Drizzle can sync up with MetaMask.