https://github.com/adrianmcli/truffle-next

🛰️ A boilerplate Truffle Box project with Next.js for rapid Ethereum Dapp development
https://github.com/adrianmcli/truffle-next

ethereum ethereum-contract nextjs reactjs solidity truffle truffle-framework

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/adrianmcli/truffle-next
• Owner: adrianmcli
• Created: 2017-10-25T03:09:02.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2021-11-20T16:09:58.000Z (almost 3 years ago)
• Last Synced: 2024-07-27T15:39:25.840Z (about 2 months ago)
• Topics: ethereum, ethereum-contract, nextjs, reactjs, solidity, truffle, truffle-framework
• Language: JavaScript
• Homepage:
• Size: 261 KB
• Stars: 194
• Watchers: 8
• Forks: 50
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Truffle and Next.js
 




  



Rapid Ethereum Dapp Development




  

  

  



---

# A Minimal Smart Contract Development Boilerplate

[Truffle](https://github.com/trufflesuite/truffle) is great for developing Solidity smart contracts, but building a React frontend for a smart contract is often a chore. [Next.js](https://github.com/zeit/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](https://github.com/adrianmcli/truffle-next/blob/master/client/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](https://github.com/trufflesuite/truffle/issues/660#issuecomment-343066784)):

   ```

   testrpc --gasLimit 6721975 --gasPrice 100000000000

   ```