# bhvr 🦫

![cover](https://cdn.stevedylan.dev/ipfs/bafybeievx27ar5qfqyqyud7kemnb5n2p4rzt2matogi6qttwkpxonqhra4)

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](https://bun.sh) as the JavaScript runtime

  - [Hono](https://hono.dev) as the backend framework

  - [Vite](https://vitejs.dev) for frontend bundling

  - [React](https://react.dev) 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

```

```typescript src/index.ts

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](https://supabase.com), or ORMs like [Drizzle](https://orm.drizzle.team/docs/get-started) or [Prisma](https://www.prisma.io/orm)

### 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](https://ui.shadcn.com) or routing using [React Router](https://reactrouter.com/start/declarative/installation).

```

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

```

```typescript src/App.tsx

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

```typescript

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`

```typescript

import { ApiResponse } from 'shared'

```

## Getting Started

### Quick Start

You can start a new bhvr project using the [CLI](https://github.com/stevedylandev/create-bhvr)

```bash

bun create bhvr

```

### Installation

```bash

# Install dependencies for all workspaces

bun install

```

### Development

```bash

# 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

```bash

# 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](https://orbiter.host)

- [GitHub Pages](https://vite.dev/guide/static-deploy.html#github-pages)

- [Netlify](https://vite.dev/guide/static-deploy.html#netlify)

- [Cloudflare Pages](https://vite.dev/guide/static-deploy.html#cloudflare-pages)

**Server**

- [Cloudflare Worker](https://gist.github.com/stevedylandev/4aa1fc569bcba46b7169193c0498d0b3)

- [Bun](https://hono.dev/docs/getting-started/bun)

- [Node.js](https://hono.dev/docs/getting-started/nodejs)

## 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:

```typescript

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

```

## Learn More

- [Bun Documentation](https://bun.sh/docs)

- [Vite Documentation](https://vitejs.dev/guide/)

- [React Documentation](https://react.dev/learn)

- [Hono Documentation](https://hono.dev/docs)

- [TypeScript Documentation](https://www.typescriptlang.org/docs/)