create-dapp-template

A lightweight, developer-friendly full-stack starter kit for building DApps on Core. Preconfigured with Hardhat, Next.js, and RainbowKit, it offers a seamless developer experience from testing and deploying smart contracts to frontend connectivity.

With just one simple command, get your dApp up and running on the Core network in minutes!

npx create-dapp-template@latest your-dapp-name

Features

• One-command setup – Start building instantly
• Next.js 15 – Modern React-based frontend
• RainbowKit + Wagmi + Viem – Wallet connection + blockchain hooks
• Hardhat – Contract dev ready for Core Mainnet/Testnet
• Toastify – Minimal notifications
• Built-in ABI sync – Contracts auto-integrated with frontend

Prerequisites

• Node.js: Version 20.x or higher is recommended. You can check your version with:

  node --version

  Download from nodejs.org.

Installation

Using npm (Recommended)

npx create-dapp-template@latest your-dapp-name

Using yarn

yarn create dapp-template your-dapp-name

Clone manually:

You can also clone the repository and run it locally:

# Clone the repository
git clone https://github.com/your-username/create-dapp-template.git

# Navigate to the project directory
cd create-dapp-template

# Install dependencies
npm install
# or
yarn install

Usage

# Navigate to the created dApp folder
cd your-dapp-name

# Start development server
npm run dev
# or
yarn dev

Configuration

Create a .env.local file in the root directory:

NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_project_id_here
PRIVETKEY=your_private_key

Project Structure

create-dapp-template/
├── artifacts/           # Hardhat compiled contract artifacts
├── cache/              # Hardhat cache
├── contracts/          # Smart contracts
├── scripts/            # Hardhat deployment scripts
├── src/
│   ├── abi/           # Auto-synced ABIsfor frontend usage
│   ├── pages/         # Next.js pages
│   ├── styles/        # CSS styles
│   └── wagmi.ts       # Wallet configuration
├── test/              # Test files
├── package.json       # Project dependencies
├── tsconfig.json      # TypeScript configuration
└── hardhat.config.js  # Hardhat configuration

Compile Contracts

Place them in the contracts/ folder

Example: Replace Lock.sol with your custom .sol file

npx hardhat compile

Run Tests

Place them in the test/ folder

Format: <contract-name>.test.js

npx hardhat test

Deploy Contracts

Place your deployment scripts inside the scripts/ directory (e.g., deploy.js).

Ensure your wallet's private key is added to the .env file, and that the wallet has sufficient funds on the target network.

npx hardhat run scripts/deploy.js --network <network_name>

Replace <network_name> with the network you want to deploy to (e.g., core_testnet2)

Wallet Setup

// src/wagmi.ts
import { getDefaultConfig } from "@rainbow-me/rainbowkit";
import { coreDao, coreTestnet1, coreTestnet2 } from "wagmi/chains";

export const config = getDefaultConfig({
  appName: "Core Quickstart",
  projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
  chains: [coreDao, coreTestnet1, coreTestnet2],
  ssr: true,
});

Running the Frontend

After setting up your contracts and installing dependencies, you can start the Next.js frontend development server with:

npm run dev

or

yarn dev

This will start the application at http://localhost:3000 by default.

ABI Usage

After compiling your smart contracts with Hardhat, the ABI (Application Binary Interface) will be automatically copied to the src/abi directory by a custom Hardhat task.

To use the ABI in your frontend:

1. Import the ABI in your component:
   Use a default import to bring the ABI into your TypeScript/React component:

   // Example usage in a React component
   import YourContractABI from '../abi/YourContract.json';
   import { useContractRead } from 'wagmi';
   
   export function YourComponent() {
     const { data } = useContractRead({
       address: 'YOUR_CONTRACT_ADDRESS',
       abi: YourContractABI,
       functionName: 'yourFunction',
     });
   
     return (
       // Your component JSX
     );
   }

   Note: If you encounter a TypeScript error when importing the JSON file, ensure your tsconfig.json includes "resolveJsonModule": true under compilerOptions.

2. Keep ABIs up to date:
   Whenever you update and recompile your contracts, the ABI in src/abi will be updated automatically.