
bhvr-forge is a comprehensive full-stack TypeScript and Solidity monorepo starter that builds on the existing bhvr stack by adding blockchain capabilities through Foundry integration. This guide will help you understand how bhvr-forge works and how to get started with its smart contract features.
Project Structure
bhvr-forge extends the traditional bhvr stack with an additional contracts package:
.
├── client/ # React frontend
├── server/ # Hono backend
├── shared/ # Shared TypeScript definitions
│ └── src/types/ # Type definitions used by both client and server
├── contracts/ # Solidity smart contracts with Foundry
│ ├── src/ # Contract source files
│ ├── script/ # Deployment scripts
│ └── test/ # Contract test files
└── package.json # Root package.json with workspacesPrerequisites
Before you can use bhvr-forge, you need to have:
To verify your Foundry installation, run:
forge --versionSetting Up a New Project
Create a new bhvr-forge project using Bun's create command:
bun create bhvr-forge@latestThis will set up the entire monorepo with all the necessary packages.
Working with Smart Contracts
bhvr-forge comes with a simple Counter contract for demonstration purposes, located in the contracts/src directory.
Local Development Workflow
Start the local Anvil blockchain
In a separate terminal, run:
anvilThis starts a local Ethereum testnet on your machine with pre-funded accounts.
Deploy your contracts
cd contracts
bun run deploy:localThis command:
- Compiles your Solidity contracts
- Generates TypeScript types for your contracts (enabling type safety when interacting with them)
- Deploys the contracts to your local Anvil network
Start the development server
cd ../
bun run devThis starts the full-stack application, including:
- React frontend (client)
- Hono backend (server)
- Type compilation watcher (shared)
Interact with your contract
The starter template includes examples of how to interact with your contract from the React frontend. You can call the Counter contract's state and increment it through the UI.
Understanding Contract Types
One of the powerful features of bhvr-forge is automatic type generation for your smart contracts. When you deploy your contracts, TypeScript types are generated, enabling:
- Type-safe contract interactions
- Autocomplete for contract functions and parameters
- Error detection at compile time instead of runtime
These types are made available throughout the monorepo, ensuring consistency between your frontend, backend, and contract code.
Available Scripts in the Contracts Package
The contracts package comes with several useful scripts:
bun run build: Compiles your contractsbun run test: Runs contract testsbun run deploy:local: Deploys to local Anvil networkbun run generate-types: Generates TypeScript types from your contracts
Customizing Your Contracts
To add new contracts:
-
Create a new Solidity file in
contracts/src/ -
Update the deployment script in
contracts/script/to include your new contract -
Update the
contracts/wagmi.config.tsfile with the path to your new contract
import { defineConfig } from '@wagmi/cli'
import { foundry } from '@wagmi/cli/plugins'
export default defineConfig({
out: 'generated/contracts.ts',
plugins: [
foundry({
project: '.',
artifacts: 'out',
include: [
'Counter.sol/**',
// Add your contract names here
],
}),
],
})-
Run the deployment process again
-
Your new contract will be available with full type support throughout the app
Connecting to Other Networks
While the default setup uses a local Anvil network, you can configure the contracts package to deploy to testnets or mainnets:
- Create environment-specific deployment scripts in the
contracts/script/directory - Configure network details in
foundry.toml - Create corresponding npm scripts in the contracts package.json
Next Step
bhvr-forge combines the type-safe full-stack development of the bhvr stack with the power of Solidity smart contracts, providing a comprehensive starting point for Web3 applications. The tight integration between TypeScript and Solidity ensures a seamless development experience with shared types across the entire application.
For more information on using the underlying bhvr stack, check out the official docs.
bhvr Docs