dappbooster

dAppBooster

GitHub package.json version GitHub top language GitHub branch status GitHub License

dAppBooster is a template to help you in the development of blockchain frontend applications. It aims to provide an opinionated set of tools and best practices to speed up the development process and make it more reliable.

Requirements
Installation
Configuration
Development
Advanced configuration
Contributing
Tools and libraries

Requirements

Node v20+
pnpm

Installation

Ensure pnpm is installed (https://pnpm.io/) and clone the repository.

# Clone the repository
git clone git@github.com:BootNodeDev/dAppBooster.git my-dapp

# Change the directory
cd my-dapp

# Checkout the latest release
git checkout main

# Create a local .env file
cp .env.example .env.local

# Install the dependencies
pnpm i

Now you might want to change your project's name and description in the package.json file.

{
  "name": "my-dapp",
  "description": "My dApp"
}

Also you might want to change your project's remote repository to a different one.

# Change the remote repository
git remote set-url origin

Configuration

Configuration File

Configure the appropriate settings in the .env.local file. Most vars are optional and they should be self-explanatory.

Development

Serve dev mode

pnpm dev

You can start modifying the content of the home page by editing src/components/pageComponents/home/index.tsx. The page auto-updates as you edit the file.

You can also modify and see how our Web3 components work in the demos folder.

Build for production

pnpm build

Serve production build

pnpm preview

Basic folder structure

src/: Source code
- components/: Reusable components
  - components/sharedComponents: Components shared across multiple pages
  - components/pageComponents: Components specific to a page
- routes/: TanStack Router routes
- styles/: App styles

Advanced configuration

Networks

To add / remove / edit a network supported by the dApp you can do it directly in the networks.config.ts file.

Import the supported network of your choice, say base.

- import { mainnet, optimismSepolia, sepolia } from 'viem/chains'
+ import { base, mainnet, optimismSepolia, sepolia } from 'viem/chains'

...

- export const chains = [mainnet, optimismSepolia, sepolia] as const
+ export const chains = [base, mainnet, optimismSepolia, sepolia] as const

Include it in the trasports, using the default RPC provided by wagmi/viem...

export const transports: RestrictedTransports = {
    ...
+   [base.id]: http(env.PUBLIC_RPC_BASE),
}

Specifying the RPC

If you want to use an RPC different from the one provided by wagmi

Define the env variable

+ PUBLIC_RPC_BASE=https://base.llamarpc.com

Import it in the src/env.ts file

export const env = createEnv({
  client: {
    ...
+   PUBLIC_RPC_BASE: z.string().optional(),
  },
})

Note: if not specified, it will be undefined making the app to use the wagmi-defined RPC.

ESLint configuration for production releases

If you are developing a production application, we recommend updating the configuration file to enable type aware lint rules:

Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}

Replace plugin:@typescript-eslint/recommended for plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
Optionally add plugin:@typescript-eslint/stylistic-type-checked