🛰️ A boilerplate Truffle Box project with Next.js for rapid Ethereum Dapp development
Rapid Ethereum Dapp Development
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:
truffle initproject is used as the base (along with a SimpleStorage example contract).
A Next.js project resides in the
clientdirectory 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
Install Truffle globally.
bash npm install -g truffle
Download the box. This also takes care of installing the necessary dependencies.
bash truffle unbox adrianmcli/truffle-next
Run the development console.
bash truffle develop
Compile and migrate the smart contracts. Note inside the development console we don't preface commands with
bash compile migrate
Run the next.js server for the front-end. Smart contract changes must be manually recompiled and migrated.
bash // Change directory to the front-end folder cd client // Serves the front-end on http://localhost:3000 npm run dev
// If outside the development console.. truffle test ```
truffle developexposes the blockchain onto port
9545, you'll need to add a Custom RPC network of
http://localhost:9545in your MetaMask to make it work.
We highly recommend using
testrpc, but if you want to use
testrpc, there are a couple things you need to do:
localhost:9545so we refer to
testrpcwith the following command (because reasons):
testrpc --gasLimit 6721975 --gasPrice 100000000000