bhvr 🦫

A full-stack TypeScript monorepo starter with shared types, using Bun, Hono, Vite, and React

Why bhvr?

While there are plenty of existing app building stacks out there, many of them are either bloated, outdated, or have too much of a vendor lock-in. bhvr is built with the opinion that you should be able to deploy your client or server in any environment while also keeping type saftey.

Features

• Full-Stack TypeScript: End-to-end type safety between client and server
• Shared Types: Common type definitions shared between client and server
• Monorepo Structure: Organized as a workspaces-based monorepo
• Modern Stack:
  • Bun as the JavaScript runtime
  • Hono as the backend framework
  • Vite for frontend bundling
  • React for the frontend UI

Project Structure

.
├── client/               # React frontend
├── server/               # Hono backend
├── shared/               # Shared TypeScript definitions
│   └── src/types/        # Type definitions used by both client and server
└── package.json          # Root package.json with workspaces

Server

bhvr uses Hono as a backend API for it's simplicity and massive ecosystem of plugins. If you have ever used Express then it might feel familiar. Declaring routes and returning data is easy.

server
├── bun.lock
├── package.json
├── README.md
├── src
│   └── index.ts
└── tsconfig.json

import { Hono } from 'hono'
import { cors } from 'hono/cors'
import type { ApiResponse } from 'shared/dist'

const app = new Hono()

app.use(cors())

app.get('/', (c) => {
  return c.text('Hello Hono!')
})

app.get('/hello', async (c) => {

  const data: ApiResponse = {
    message: "Hello BHVR!",
    success: true
  }

  return c.json(data, { status: 200 })
})

export default app

If you wanted to add a database to Hono you can do so with a multitude of Typescript libraries like Supabase, or ORMs like Drizzle or Prisma

Client

bhvr uses Vite + React Typescript template, which means you can build your frontend just as you would with any other React app. This makes it flexible to add UI components like shadcn/ui or routing using React Router.

client
├── eslint.config.js
├── index.html
├── package.json
├── public
│   └── vite.svg
├── README.md
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── assets
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

import { useState } from 'react'
import beaver from './assets/beaver.svg'
import { ApiResponse } from 'shared'
import './App.css'

const SERVER_URL = import.meta.env.VITE_SERVER_URL || "http://localhost:3000"

function App() {
  const [data, setData] = useState<ApiResponse | undefined>()

  async function sendRequest() {
    try {
      const req = await fetch(`${SERVER_URL}/hello`)
      const res: ApiResponse = await req.json()
      setData(res)
    } catch (error) {
      console.log(error)
    }
  }

  return (
    <>
      <div>
        <a href="https://github.com/stevedylandev/bhvr" target="_blank">
          <img src={beaver} className="logo" alt="beaver logo" />
        </a>
      </div>
      <h1>bhvr</h1>
      <h2>Bun + Hono + Vite + React</h2>
      <p>A typesafe fullstack monorepo</p>
      <div className="card">
        <button onClick={sendRequest}>
          Call API
        </button>
        {data && (
          <pre className='response'>
            <code>
            Message: {data.message} <br />
            Success: {data.success.toString()}
            </code>
          </pre>
        )}
      </div>
      <p className="read-the-docs">
        Click the beaver to learn more
      </p>
    </>
  )
}

export default App

Shared

The Shared package is used for anything you want to share between the Server and Client. This could be types or libraries that you use in both the enviorments.

shared
├── package.json
├── src
│   ├── index.ts
│   └── types
│       └── index.ts
└── tsconfig.json

Inside the src/index.ts we export any of our code from the folders so it's usabe in other parts of the monorepo

export * from "./types"

By running bun run dev or bun run build it will compile and export the packages from shared so it can be used in either client or server

import { ApiResponse } from 'shared'

Getting Started

Quick Start

You can start a new bhvr project using the CLI

bun create bhvr

Installation

# Install dependencies for all workspaces
bun install

Development

# Run shared types in watch mode, server, and client all at once
bun run dev

# Or run individual parts
bun run dev:shared  # Watch and compile shared types
bun run dev:server  # Run the Hono backend
bun run dev:client  # Run the Vite dev server for React

Building

# Build everything
bun run build

# Or build individual parts
bun run build:shared  # Build the shared types package
bun run build:client  # Build the React frontend

Deployment

Deplying each piece is very versatile and can be done numerous ways, and exploration into automating these will happen at a later date. Here are some references in the meantime.

Client

• Orbiter
• GitHub Pages
• Netlify
• Cloudflare Pages

Server

• Cloudflare Worker
• Bun
• Node.js

Type Sharing

Types are automatically shared between the client and server thanks to the shared package and TypeScript path aliases. You can import them in your code using:

import { ApiResponse } from '@shared/types';

Learn More

• Bun Documentation
• Vite Documentation
• React Documentation
• Hono Documentation
• TypeScript Documentation