Truffle and Next.js

Rapid Ethereum Dapp Development

A Minimal Smart Contract Development Boilerplate

Truffle is great for developing Solidity smart contracts, but building a React frontend for a smart contract is often a chore. Next.js is one of the easiest ways to build such a frontend and the integration between Truffle and Next.js is what this boilerplate is trying to demonstrate.

There are two major features:

• A plain truffle init project is used as the base (along with a SimpleStorage example contract).

• A Next.js project resides in the client directory with a symlink to the output folder of the contract ABI definitions. The Next.js app also provides a simple skeleton for connecting to and interacting with the smart contract on a network.

For more information on how the frontend works, go read the README.md located in the client directory.

Installation

1. Install Truffle globally.

   npm install -g truffle
   

2. Download the box. This also takes care of installing the necessary dependencies.

   truffle unbox adrianmcli/truffle-next
   

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. Run the next.js server for the front-end. Smart contract changes must be manually recompiled and migrated.

   // Change directory to the front-end folder
   cd client
   // Serves the front-end on http://localhost:3000
   npm run dev
   

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.

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

Running with MetaMask

Since truffle develop exposes the blockchain onto port 9545, you'll need to add a Custom RPC network of http://localhost:9545 in your MetaMask to make it work.

Running with TestRPC

We highly recommend using truffle develop over testrpc, but if you want to use testrpc, there are a couple things you need to do:

• Change Line 6 of client/lib/getWeb3.js to use localhost:8545 instead of localhost:9545 so we refer to testrpc instead of truffle develop.

• Run your testrpc with the following command (because reasons):

  testrpc --gasLimit 6721975 --gasPrice 100000000000