ETH Basic Typescript Starter is a monorepo boilerplate for building Ethereum dapps that pairs a Foundry smart contract setup with a React/TypeScript frontend, using Turborepo to tie them together. The template's core function is to give you a working Counter smart contract on a local anvil instance plus a dapp that can interact with it, while also providing a Subgraph for indexing events.
What is ETH Basic Typescript Starter?
ETH Basic Typescript Starter is a boilerplate that combines a Foundry-based smart contract project with a Vite-powered React/TypeScript dapp and a subgraph for indexing. It takes a local anvil blockchain and a minimal Counter contract as its starting point, and produces a full development workflow: a running local node, a deployed contract, generated wagmi hooks, and a web UI that can interact with the contract. The project uses Turborepo to manage the monorepo, with separate packages for the contracts, web app, wagmi configuration, and shared constants.
Key Features
- Turborepo monorepo structure — Organized into
apps/contracts,apps/web,packages/wagmi-config, andpackages/shared-configfor clear separation of contracts, frontend, and shared configuration. - Foundry smart contract toolkit — Includes tests, a local anvil instance, multi-chain deployment utils, and an upgradeable Counter example.
- React + TypeScript with Vite — The web app is built with Vite for fast development and uses TypeScript throughout.
- wagmi & RainbowKit — Integrated for wallet connection; custom hooks are generated automatically with the wagmi-cli.
- Subgraph — A subgraph to index your smart contracts, plus graphql-codegen generated hooks to query it from the web app.
- Docker Compose — A compose file runs anvil and graph-node locally without manual installation.
- Tailwind CSS with DaisyUI — Styling is done with Tailwind and DaisyUI components, so you get utility classes and prebuilt UI elements.
- Rivet recommended — The README suggests Rivet as a developer wallet and devtool for local development.
Who is it for?
- Ethereum dapp developers who want a ready-made scaffold covering contracts, frontend, and indexing in one repo.
- Smart contract engineers using Foundry who need a quick way to deploy and interact with their contracts from a web UI.
- Teams starting local blockchain development who want anvil, graph-node, and a React app all running together via Docker Compose.
What can you do with it?
- Local development: Run
yarn run devto concurrently launch your anvil instance and the React dev server. - Deploy contracts: Run
yarn run deploy:localto deploy the Counter contract to your local chain and regenerate your wagmi custom hooks. - Index events: Use the provided subgraph to index your smart contract events, then query them with generated graphql-codegen hooks.
How does it work?
The README shows a three-step workflow. First, install dependencies with yarn. Second, start the development process with yarn run dev, which concurrently launches your anvil instance and the React app dev server. Third, deploy with yarn run deploy:local, which runs the deploy script on your local chain and regenerates custom hooks into your wagmi config.
FAQ
What does yarn run dev do?
It launches your anvil instance and starts your React app dev server concurrently, so you can develop contracts and frontend together.
How do I deploy the Counter contract?
Run yarn run deploy:local. This executes your deploy script on the local chain and regenerates the custom wagmi hooks straight into the wagmi config.
Does the starter include a Subgraph?
Yes, it includes a Subgraph to index your smart contracts. The repo also provides graphql-codegen generated hooks to query the Subgraph from your apps.
What is in the packages folder?
The packages folder contains wagmi-config, which holds wagmi and RainbowKit config and generated code from the wagmi-cli, and shared-config, which hosts app constants.
