Creating Full Stack Dapps with Truffle Boxes

Smart Contracts Ain’t Easy

I don’t know about other developers, but it took me a while to wrap my head around blockchains, smart contracts and dapps. I have been a developer for over 12 years, know half a dozen languages pretty well, even won a few machine learning contests, but when I took my first look at blockchain development, I was lost. Only some of what I knew already translated. A big part did, don’t get me wrong, but the parts I didn’t know had me looking for answers to my beginner problems for hours. I look back on some of those issues and they wouldn’t be issues for me now. But at the time, it felt like backing up a trailer, everything was backwards and no matter what I did, I couldn’t get it going in the right direction.

Until you have a picture in your head of a new technology running like a machine, there is no muscle memory. And once you do, it’s hard to explain to people who don’t know. First, there is the concept of smart contracts in the first place. “Yeah, it’s like the ability to program your money.” In the first couple years of my programming career, I stayed away from scary things, just in case. Payment processing was a scary thing and things were clunkier back (…see SOAP, XMLRPC). What if there was a bug that randomly adds a couple of zeroes to a payment in an edge case and it just keeps happening because you can’t find it?

Then there is the fact you’ll be dealing with a blockchain which you may not be that familiar with yet. And a new language Solidity, which is a lot different than any language you have used so far except for Golang.

That’s a lot of things to deal with at once. So I’m going to show you how to set up a development stack, so that you can spend most of your time actually learning to write smart contracts.

Get Metamask

The first thing you need to get is Metamask. Dapps will also run in the Mist wallet and various blockchain enabled wallets and dapps. But in development mode, Metamask is the way to go. Metamask is available for Chrome, Firefox and Opera. Once you have Metamask installed create your wallet and save your backup phrase somewhere safe.

Get Ganache

Now that you have a wallet, you need a blockchain. We need a private local blockchain running for our development environment, so we can test our smart contracts without an risk of losing any real ether. Once you have Ganache installed, you pretty much just start it and there’s your blockchain.

Now that you have your blockchain running, click on the gear in the GUI to go to settings and make sure the blockchain is running on port 8545. Once that is done, go back to Metamask and change the network to Localhost 8545, It will currently be set to Main Ethereum Network.

Now we’re going to import one of the wallets Ganache created for us into Metamask. Click on the key icon in one of the account rows in Ganache. You should see a popup with the private key for that account, like the picture above. Use Ctrl C to copy the private key.

Now go back to your browser and open Metamask. Click on the account icon in Metamask and choose Import Account. In the next window, paste the private key you have in your clipboard into the form and click Import. You should now see a wallet in Metamask with 100 ether in it. That should be enough pocket change to do some experimenting.

Install Truffle and Get the Drizzle Truffle Box

If you don’t have NodeJS installed, you will have to get that from the NodeJS site or your package manager. To install truffle, open a terminal and type the following command:

npm install -g truffle

Now create a folder where you want to store your project and run the following in a terminal there:

truffle unbox drizzle

Getting the Truffle Box Running

Ok, when I first tried this, I unboxed about 5 separate truffle boxes and couldn’t get a single one to run correctly. So I gave up and then came back. This should fix your problem, at least for now. And it may not be a step you need in the future.

Steps to Fix this Issue

Open the the package.json file in the project. Find the entry for web3 in the dependencies section and delete it. Then run the following in terminal:

npm update

Then:

npm install --save web3

Continue with the Standard Install

Make sure you have Ganache running and your Metamask connected to the local network.

Run the following to compile the contracts in a terminal in the base folder of the project:

truffle compile

Then run the next command to deploy the contracts to your local blockchain:

truffle migrate

You should now see the transactions for these contracts in the Transactions tab of Ganache.

To start the dapp, run the following in your terminal:

npm run start

You should now see something like the following at http://localhost:3000.

That’s about as far as I going in this tutorial. Now you have a development environment to experiment with Ethereum smart contracts, Solidity and distributed blockchain applications.