Getting Truffle to Work With React

Truffle is a handy tool that helps you compile and deploy smart contracts. I ran into a bunch of gotchas the first time I tried setting a project up with truffle and react, so I’m going to walk your through the basics.

Truffle has made it simple to build Dapps with different frontend frameworks by creating pre-configured boilerplates projects called truffle boxes. To create a react truffle box create an empty folder and navigate into it in the command line, then type truffle unbox react.

Before you can use your truffle box you have to compile and deploy the example smart contract that comes with the boilerplate. To do this, type truffle develop in the command line and this will start a truffle development console. Inside the console type compile, wait for it to finish compiling and then type migrate.

The ‘develop’ command will create a test blockchain for you to use while you are development. The ‘compile’ command takes your developer-friendly solidity code and coverts it into a more computer-friendly format for use on the blockchain. Once the code is converted, the computer-friendly code needs to be pushed onto the blockchain, this is what the ‘migrate’ command does. To avoid any confusion here, just think of migrate as a synonym for ‘deploy’.

Once the example smart contract has been compiled and deployed, the react-truffle Box docs say that you should be able to run npm run start in a new terminal window and everything will work.

This wasn’t the case for me.

The project started up in my browser but the stored value on the screen was zero. The stored value should be 5 if everything is working properly.

The project needs one more configuration step .

Go to the truffle.js in the root of the project and change the code to

module.exports = {
  networks: {
    development: {
      host: "127.0.0.1",
      port: 9545,
      network_id: "*"
    }
  }
};

In the truffle docs, under the configuration section, it will tell you to change the port to ‘8545’. This is not the case with the latest react-truffle box (as of May 18th 2018). If you go to /src/utils/getWeb3.js line 24 will read

var provider = new Web3.providers.HttpProvider('http://127.0.0.1:9545');

The port number in truffle.js needs to match the HttpProvider in getWeb3.js, or vice-versa.

Now run npm run start in a new terminal window and everything should work fine. It is important to understand that you need two terminal windows open at the same time. In one you should be running truffle develop, this will create a local blockchain for you to use in development. On the second, while the first is still running, you should run npm run start, and this will run you application, which will connect to your local blockchain.

If the store stored value on the screen still shows zero then there are two possible reasons that I know of.

The first is to make sure that you have disabled Metamask. Metamask is a browser extension that lets connect to the blockchain. We have not discussed Metamask in this write-up, but if you’re the kind of person that reads blockchain tutorials then there is every chance that you already have it set up. If you are using Metamask, you must disable it for the react truffle box to work. If you want to configure Metamask to work with your development blockchain then some tinkering is in order, I’ve left instructions in the links below.

The second gotcha is that you might be trying to connect with an account that doesn’t exist anymore. When you type ‘truffle develop’ it creates 10 fake accounts for you to use with your development blockchain. If you have been starting and stopping the ‘truffle develop’ console a lot then you might be using an account that was created in a previous session. If this is the case your browser console in chrome will throw the an error similar to:
Uncaught (in promise) Error: Attempting to run transaction which calls a contract function, but recipient address 0x4e71920b7330515faf5ea0c690f1ad06a85fb60c is not a contract address

To remove this error you will need to add a --reset flag to the migrate command. Go back to the terminal window that is running the development blockchain and type migrate --reset. Restart you other terminal window, the one running the application, and everything should work fine.

From the top:

1. Create an empty folder for your project.
2. Navigate into it in the terminal and type truffle unbox react.
3. In your command line type truffle develop to open a truffle console.
4. Inside the truffle console, type compile
5. Then type migrate or migrate --reset if you’ve already done this before and you are getting the error I mentioned above.
6. Change the contents of ‘truffle.js’ to:

module.exports = {
  networks: {
    development: {
      host: "127.0.0.1",
      port: 9545,
      network_id: "*"
    }
  }
};

1. Make sure Metamask has been disabled in your browser.
2. Open a separate terminal window and run npm run start

Now you should see the stored value on the screen change to ‘5’ and this means everything is working.

Links

• The Truffle Framework
• Truffle Boxes
• Truffle Configuration Docs
• Metamask
• Using Metamask with Truffle Develop