bhvr: A Full-Stack TypeScript Monorepo with Bun, Hono, Vite, and React

Introduction

bhvr is a comprehensive full-stack TypeScript monorepo starter kit designed to streamline modern web application development. It integrates a powerful combination of technologies: Bun as the JavaScript runtime and package manager, Hono for the backend framework, Vite for blazing-fast frontend bundling, and React for building dynamic user interfaces. This template emphasizes end-to-end type safety and a flexible, vendor-agnostic architecture, making it an excellent choice for developers looking for a lean and efficient development experience.

Installation

Getting started with bhvr is straightforward. First, ensure you have Bun installed on your system. You can verify its installation by running bun --version.

To create a new bhvr project, execute the following command in your terminal:

bun create bhvr@latest my-app

Navigate into your new project directory and start the development server:

cd my-app
bun dev

For comprehensive documentation and further details, visit the official bhvr documentation.

Examples

bhvr provides a clear structure for client, server, and shared code, ensuring type safety across your entire application.

Server Example (Hono)

The server directory utilizes Hono, a lightweight and fast web framework, for building your backend API. Here's a basic example of a Hono route:

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

Client Example (React with Vite)

The client directory is set up with Vite and React, allowing you to build your frontend with familiar tools. This example demonstrates calling the Hono backend:

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 Types

The shared package is crucial for maintaining end-to-end type safety. It allows you to define types once and use them across both your client and server applications.

// shared/src/types/index.ts
export type ApiResponse = {
  message: string;
  success: boolean;
};

// shared/src/index.ts
export * from "./types";

You can then import these shared types into your client or server code:

import { ApiResponse } from 'shared';

Why Use bhvr?

bhvr stands out by addressing common challenges in modern web development. Many existing stacks can be bloated, outdated, or impose significant vendor lock-in. bhvr offers a refreshing alternative by providing a lean, up-to-date, and highly flexible foundation. Its core philosophy is to enable deployment of your client or server in virtually any environment while maintaining robust type safety throughout the entire application.

Key features include:

Full-Stack TypeScript: Ensures end-to-end type safety between your client and server.
Shared Types: Facilitates common type definitions across all parts of your monorepo.
Monorepo Structure: Organized as a workspaces-based monorepo with Turbo for efficient build orchestration.
Modern Stack: Leverages cutting-edge technologies like Bun, Hono, Vite, and React.