ykoyote/nextjs-dapp-starter-ts

A fullstack monorepo template to develop ethereum dapps

full-stack dApp starter for solidity smart contract development

A monorepo boilerplate code for typesafe full-stack Solidity development based on template-ethereum-contracts .

Contents

• Prerequisites
• Features
• Run in Gitpod
• Run Locally
• Running Tests
• Scripts
• Acknowledgements
• License

Prerequisites

• Yarn
• Node.js
• MetaMask wallet browser extension.

Features

Here's an overview of the included frameworks and tools.

• Next.js - Minimalistic framework for server-rendered React applications.
• Typescript - Superset of JavaScript which primarily provides optional static typing, classes and interfaces.
• ESLint - The pluggable linting utility.
• Yarn Workspace - Easier monorepo management.
• Github Actions - Tools to automate all your software workflows.
• Stitches - Typesafe CSS-in-JS with near-zero runtime.
• Typechain - TypeScript bindings for Ethereum smart contracts.
• Hardhat - Ethereum development environment for professionals.
• Hardhat-deploy - A Hardhat Plugin For Replicable Deployments And Easy Testing.
• Jest - A delightful JavaScript Testing Framework with a focus on simplicity.
• Mocha - A feature-rich JavaScript test framework.
• Cypress - A JavaScript End to End Testing Framework.
• React Testing Library - Simple and complete React DOM testing utilities that encourage good testing practices.

Run in Gitpod

To run this project in Gitpod, follow these steps:

1. Click this link to deploy to gitpod

2. Import the RPC address given to you by GitPod into your MetaMask wallet

This endpoint will look something like this:

https://8545-copper-swordtail-j1mvhxv3.ws-eu18.gitpod.io/

The chain ID should be 1337. If you have a localhost rpc set up, you may need to overwrite it.

you can also change your status of your open ports by going to port settings.

Run Locally

Clone the project

  git clone https://github.com/G3root/nextjs-dapp-starter-ts my-project

Go to the project directory

  cd my-project

Install dependencies

  yarn install

Start the server

  yarn dev

Running Tests

To run tests, run the following command

  yarn test

Scripts

Here is the list of npm scripts you can execute:

Some of them relies on packages/hardhat/_scripts.js to allow parameterizing it via command line argument (have a look inside if you need modifications)

yarn prepare

As a standard lifecycle npm script, it is executed automatically upon install. It generates typechain to get you started with type safe contract interactions.

yarn dev

this will start a next.js and Hardhat development server .

yarn test

These will execute your tests in packages/next-app and packages/hardhat.

yarn build

this will build packages/next-app and compile packages/hardhat for production.

yarn deploy <network> [args...]

This will deploy the contract on the specified network.

Behind the scene it uses hardhat deploy command so you can append any argument for it

yarn start

this will start a production Next.js server located in packages/next-app.

yarn lint, yarn lint:fix, yarn format and yarn format:fix

These will lint and format your code under packages folder. the :fix version will modify the files to match the requirement specified in .eslintrc and .prettierrc..

yarn compile

These will compile your contracts

yarn void:deploy

This will deploy your contracts on the in-memory hardhat network and exit, leaving no trace. quick way to ensure deployments work as intended without consequences

yarn hardhat:test [mocha args...]

These will execute your tests in packages/hardhat directory using mocha. you can also pass extra arguments to mocha

yarn hardhat:coverage

These will produce a coverage report for packages/hardhat tests.

yarn gas

These will produce a gas report for functions used in the packages/hardhat tests

yarn hardhat:dev

These will run a local hardhat network on localhost:8545 and deploy your contracts on it. Plus it will watch for any changes and redeploy them.

yarn local:dev

This assumes a local node it running on localhost:8545. It will deploy your contracts on it. Plus it will watch for any changes and redeploy them.

yarn execute <network> <file.ts> [args...]

This will execute the script <file.ts> against the specified network

yarn export <network> <file.json>

This will export the abi+address of deployed contract to <file.json>

yarn fork:execute <network> [--blockNumber <blockNumber>] [--deploy] <file.ts> [args...]

This will execute the script <file.ts> against a temporary fork of the specified network

if --deploy is used, deploy scripts will be executed

yarn fork:deploy <network> [--blockNumber <blockNumber>] [args...]

This will deploy the contract against a temporary fork of the specified network.

Behind the scene it uses hardhat deploy command so you can append any argument for it

yarn fork:test <network> [--blockNumber <blockNumber>] [mocha args...]

This will test the contract against a temporary fork of the specified network.

yarn fork:dev <network> [--blockNumber <blockNumber>] [args...]

This will deploy the contract against a fork of the specified network and it will keep running as a node.

Behind the scene it uses hardhat node command so you can append any argument for it

Acknowledgements

• template-ethereum-contracts

License

MIT