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.
- You will need Metamask plugin for Chrome, there are other options available, but only Metamask is covered here
-
Install Truffle and Ganache CLI globally. If you prefer, the graphical version of Ganache works as well!
npm install -g truffle npm install -g ganache-cli
-
Run the development blockchain, we recommend passing in a blocktime. Otherwise, its difficult to track things like loading indicators because Ganache will mine instantly.
// 3 second blocktime. ganache-cli -b 3
-
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.
// If inside the development console. test // If outside the development console.. truffle test
-
Jest is included for testing React components. Compile your contracts before running Jest, or you may receive some file not found errors.
// Run Jest outside of the development console for front-end component tests. npm run test
-
Compile and migrate the smart contracts. Note inside the development console we don't preface commands with
truffle
.npm run deploy:local
-
To build the application for production, use the build command. A production build will be in the build_webpack folder.
npm run build
-
Remember to connect Metamask to one of your local Ganache Ethereum accounts!
-
Where do I find more information about Drizzle?
Check out our documentation or any of the three repositories (
drizzle
,drizzle-react
,drizzle-react-components
). -
Why is there both a truffle.js file and a truffle-config.js file?
truffle-config.js
is a copy oftruffle.js
for compatibility with Windows development environments. Feel free to it if it's irrelevant to your platform. -
Where is my production build?
The production build will be in the
build_webpack
folder. This is because Truffle outputs contract compilations to thebuild
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! Plug for Chrome <etamask