Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 3 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 (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-11-20T16:09:58.000Z (over 2 years ago)
- Last Synced: 2024-01-19T10:15:57.103Z (6 months ago)
- Topics: ethereum, ethereum-contract, nextjs, reactjs, solidity, truffle, truffle-framework
- Language: JavaScript
- Homepage:
- Size: 261 KB
- Stars: 193
- Watchers: 8
- Forks: 50
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Lists
- awesome-stars - adrianmcli/truffle-next - 🛰️ A boilerplate Truffle Box project with Next.js for rapid Ethereum Dapp development (JavaScript)
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
```