Dapp Boilerplate

screenshot of Dapp Boilerplate
nextjs
react

Dapp Boilerplate

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

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.

nextjs
Next.js

Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.