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.
Install Truffle globally.
npm install -g truffle
Download the box. This also takes care of installing the necessary dependencies.
truffle unbox adrianmcli/truffle-next
Run the development console.
truffle develop
Compile and migrate the smart contracts. Note inside the development console we don't preface commands with truffle
.
compile
migrate
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
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
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.
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