truffle-next

by adrianmcli

adrianmcli / truffle-next

🛰️ A boilerplate Truffle Box project with Next.js for rapid Ethereum Dapp development

126 Stars 25 Forks Last release: Not found 76 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Truffle and Next.js


comet

Rapid Ethereum Dapp Development

made for ethereum to the moon MIT license


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.

    bash
    npm install -g truffle
    
  2. Download the box. This also takes care of installing the necessary dependencies.

    bash
    truffle unbox adrianmcli/truffle-next
    
  3. Run the development console.

    bash
    truffle develop
    
  4. Compile and migrate the smart contracts. Note inside the development console we don't preface commands with

    truffle
    .
    bash
    compile
    migrate
    
  5. 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
    
  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. ```bash // 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.