wangfowen/dapp-boilerplate

A minimal types-first boilerplate for Ethereum frontend dapp development.

Dapp Boilerplate

Includes:

• Next.js
• Typescript
• ESLint
• Prettier
• Ethers.js
• Typechain

Rationale

• Next.js because it does automatic code-splitting and has a very minimal API. Much more performant and minimal than Create-React-App.

• Typescript because you don't want to guess what type everything is.

• ESLint to catch dangerous patterns that can cause bugs. The official recommended Typescript linting config is also included.

• Prettier to enforce consistent formatting. This is setup to work with ESLint from the official Prettier documentation instructions.

• Ethers.js has the best abstraction for working with the Ethereum blockchain so far.

• Typechain so that all your contract instances have types. This means you always know what methods exist, what arguments they take, and also what the return type is.

Getting Started

Click "Use this template" at the top of this page, or click here to create your repo and clone locally.

1. Run yarn to install dependencies.
2. Run yarn typechain to generate the types for your contracts.
3. Run yarn dev to begin developing.

Adding Contracts

To add a contract and have Typechain generate types for it, simply drop the contract's ABI (as a JSON file) into the contracts directory. Types are then generated by running yarn typechain and output to the contracts/types directory.

Contributing

Make an issue to talk about what you'd like to see!

PRs welcome, let's build this together! Frontend devs unite!