How to Start Truffle’s Drizzle Box and Fix all the Compile Errors

The Truffle Framework has a new official box called Drizzle. Drizzle is basically Truffle Framework plus Create-React-App. The great thing about this box is that it integrates easily with ganache-cli and MetaMask. Its the only Truffle box (that I’m aware of) that comes prepackaged with Web3 1.0.0 instead of Web3 0.20, which means we can use Async/Await instead of Promises!

However, as is often the case with Ethereum/Solidity development, there are some breaking changes and it took a few fixes to get it running.

Our end goal is the official Drizzle start screen:

As of mid-July 2018, here is what I had to do to get the start screen up and running:

Assumptions:

Node -v 8.9.4

NPM -v 6.0.0

You have MetaMask installed as a Chrome Extension.

1. Open a terminal window and make a folder to put the truffle box

mkdir MyDrizzleFolder

(you can call this whatever you want)

2. Open your terminal window. Some of this is pulled directly from the official get started link https://truffleframework.com/boxes/drizzle

npm update  //this will avoid a few compilation errors
npm install -g truffle //if not already installed
npm install -g ganache-cli //if not already installed
cd MyDrizzleFolder
truffle unbox drizzle  
 
ganache-cli -b 3  // 3 second blocktime.
truffle compile
truffle migrate
npm run start

3. Compilation Errors with OpenZeppelin when “truffle compile”

If you get errors similar to this:

openzeppelin-solidity/contracts/token/ERC20.ERC20sol:1:1: SyntaxError: Source file requires different compiler version (current compiler is 0.4.23+commit.124ca40d.Emscripten.clang — note that nightly builds are considered to be strictly less than the released version
pragma solidity ^0.4.24;

Then go open your directory and go into node_modules/openzeppelin-solidity/contracts/token/ and open up all the solidity contracts and change them from ^0.4.24 to ^0.4.23. I had to do this for the all the solidity contracts in the ERC20 and ERC721 folders, as well as the math/SafeMath solidity contracts before it would compile. I did it all manually, and it took a few minutes. There may be a faster way, but manually was quick enough.

4. Console Compilation Errors on the Front End

If you still don’t see the official start screen, and you open your development console in the Chrome and get an error like this:

TypeError: (0 , _drizzle.generateContractsInitialState) is not a function

Then the problem is that you may need to update some Drizzle packages, so in the terminal run the following:

cd MyDrizzleFolder
npm install --save drizzle-react
npm install --save drizzle

See the following Github pull request https://github.com/truffle-box/drizzle-box/issues/24 for further explanation.

trufflesuite/drizzle-react

trufflesuite/drizzle

5. Quit all the terminal windows and re-run the following:

In one terminal window

ganache-cli -b 3

Use the mneomic phrase provided by ganache and log into your MetaMask extension and select Localhost 8545. This should give you Private test network accounts with 100 Ether each.

See, https://truffleframework.com/docs/advanced/truffle-with-metamask

6. In a second terminal window re-compile and migrate.

truffle compile
truffle migrate

7. In a third terminal window

npm start

Done! This should bring you to the official Truffle Drizzle box start screen at http://localhost:3000/. Test it out by using the Simple Storage app and it should be integrated with your MetaMask account.

Good Luck!