Dapp Boilerplate screenshot

Dapp Boilerplate

Author Avatar Theme by Adrianmcli
Updated: 22 Feb 2021
112 Stars

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

Categories

Overview

The Dapp Boilerplate is a comprehensive template for developing decentralized applications (DApps) on the Ethereum blockchain. It combines the power of Next.js, Typescript, ESLint, Prettier, Ethers.js, and Typechain to provide a performant, type-safe, and easy-to-use development environment. With automatic code-splitting, a minimal API, and robust tooling, the Dapp Boilerplate simplifies the DApp development process and ensures consistent code quality.

Features

  • Next.js: Automatic code-splitting and minimal API for improved performance and simplicity.
  • Typescript: Strongly-typed language for eliminating guesswork and ensuring code correctness.
  • ESLint: Detection of dangerous patterns and prevention of bugs with recommended Typescript linting configuration.
  • Prettier: Consistent code formatting enforced in alignment with ESLint guidelines.
  • Ethers.js: Powerful abstraction for seamless interaction with the Ethereum blockchain.
  • Typechain: Automatic generation of type definitions for contract instances, ensuring clarity on methods, arguments, and return types.

Installation

To get started with the Dapp Boilerplate, follow these steps:

  1. Click on “Use this template” at the top of this page or here to create your repository and clone it locally.
  2. Run yarn to install the required dependencies.
  3. Execute yarn typechain to generate the types for your contracts.
  4. Start development by running yarn dev.

Adding Contracts

To add a new contract and generate its corresponding types with Typechain, simply drop the contract’s ABI file (in JSON format) into the contracts directory. The types will be automatically generated when you run yarn typechain and can be found in the contracts/types directory.

Summary

The Dapp Boilerplate offers a comprehensive set of features and tools for building DApps on the Ethereum blockchain. By combining Next.js, Typescript, ESLint, Prettier, Ethers.js, and Typechain, developers can benefit from automatic code-splitting, strong typing, bug detection, code formatting enforcement, efficient blockchain interaction, and clear contract type definitions. The installation process is straightforward, and adding new contracts is made easy with Typechain’s automatic type generation. With the Dapp Boilerplate, frontend developers can unite and build DApps with confidence and efficiency.