chore: Updated primary docs pages a1e1309f
Steve · 2025-05-05 01:08 10 file(s) · +162 −9
docs/pages/deployment/client/cloudflare-pages.mdx +3 −0
1 +
# Cloudflare Pages
2 +
3 +
Coming soon
docs/pages/deployment/client/github-pages.mdx +3 −0
1 +
# GitHub Pages
2 +
3 +
Coming soon
docs/pages/deployment/client/orbiter.mdx +3 −0
1 +
# Orbiter
2 +
3 +
Coming soon
docs/pages/deployment/server/cloudflare-workers.mdx +3 −0
1 +
# Cloudflare Workers
2 +
3 +
Coming soon
docs/pages/getting-started.mdx +129 −0
1 1
# Get started
2 +
3 +
bhvr is a framework used to build apps that are not tied down to a single provider, and each piece can be deployed in multiple places.
4 +
5 +
::::steps
6 +
7 +
### Create a New Project
8 +
9 +
To start using bhvr make sure you have [Bun](https://bun.sh) installed first, then run the following command.
10 +
11 +
```bash [terminal]
12 +
bun create bhvr@latest
13 +
```
14 +
15 +
The stack is composed of the following:
16 +
17 +
```
18 +
.
19 +
├── client/               # React frontend
20 +
├── server/               # Hono backend
21 +
├── shared/               # Shared TypeScript definitions
22 +
│   └── src/types/        # Type definitions used by both client and server
23 +
└── package.json          # Root package.json with workspaces
24 +
```
25 +
26 +
### Start Up Dev Server
27 +
28 +
Once you have created your project you can `cd` into it and run the dev server
29 +
30 +
```bash [terminal]
31 +
bun run dev
32 +
```
33 +
34 +
This will spin up dev servers for the `server`, `client`, and `shared` packages
35 +
36 +
Try updating the API endpoints in the `server` package
37 +
38 +
```typescript [server/src/index.ts]
39 +
import { Hono } from 'hono'
40 +
import { cors } from 'hono/cors'
41 +
import type { ApiResponse } from 'shared/dist'
42 +
43 +
const app = new Hono()
44 +
45 +
app.use(cors())
46 +
47 +
app.get('/', (c) => {
48 +
  return c.text('Hello Hono!')
49 +
})
50 +
51 +
app.get('/hello', async (c) => {
52 +
53 +
  const data: ApiResponse = {
54 +
    message: "Hello BHVR!",
55 +
    success: true
56 +
  }
57 +
58 +
  return c.json(data, { status: 200 })
59 +
})
60 +
61 +
export default app
62 +
```
63 +
64 +
Also try editing the React app in `client`
65 +
66 +
```tsx [client/src/App.tsx]
67 +
import { useState } from 'react'
68 +
import beaver from './assets/beaver.svg'
69 +
import { ApiResponse } from 'shared'
70 +
import './App.css'
71 +
72 +
const SERVER_URL = import.meta.env.VITE_SERVER_URL || "http://localhost:3000"
73 +
74 +
function App() {
75 +
  const [data, setData] = useState<ApiResponse | undefined>()
76 +
77 +
  async function sendRequest() {
78 +
    try {
79 +
      const req = await fetch(`${SERVER_URL}/hello`)
80 +
      const res: ApiResponse = await req.json()
81 +
      setData(res)
82 +
    } catch (error) {
83 +
      console.log(error)
84 +
    }
85 +
  }
86 +
87 +
  return (
88 +
    <>
89 +
      <div>
90 +
        <a href="https://github.com/stevedylandev/bhvr" target="_blank">
91 +
          <img src={beaver} className="logo" alt="beaver logo" />
92 +
        </a>
93 +
      </div>
94 +
      <h1>bhvr</h1>
95 +
      <h2>Bun + Hono + Vite + React</h2>
96 +
      <p>A typesafe fullstack monorepo</p>
97 +
      <div className="card">
98 +
        <button onClick={sendRequest}>
99 +
          Call API
100 +
        </button>
101 +
        {data && (
102 +
          <pre className='response'>
103 +
            <code>
104 +
            Message: {data.message} <br />
105 +
            Success: {data.success.toString()}
106 +
            </code>
107 +
          </pre>
108 +
        )}
109 +
      </div>
110 +
      <p className="read-the-docs">
111 +
        Click the beaver to learn more
112 +
      </p>
113 +
    </>
114 +
  )
115 +
}
116 +
117 +
export default App
118 +
```
119 +
120 +
### Build Project
121 +
122 +
Once you have your project ready to go you can use the build command to build the `client` and `shared` packages
123 +
124 +
```bash [terminal]
125 +
bun run build
126 +
```
127 +
128 +
From there you can select multiple [deployment options](/deployment/client/orbiter)
129 +
130 +
::::
docs/pages/packages/client.mdx +3 −1
1 -
## `client`
1 +
# `client`
2 +
3 +
Coming soon
docs/pages/packages/server.mdx +3 −1
1 -
## `server`
1 +
# `server`
2 +
3 +
Coming soon
docs/pages/packages/shared.mdx +3 −1
1 -
## `shared`
1 +
# `shared`
2 +
3 +
Coming soon
docs/pages/why-bhvr.mdx +9 −1
1 -
## Why bhvr?
1 +
# Why bhvr?
2 +
3 +
I get it. Why another typescript framework for web apps? Aren't we just heaping fuel to the already massive dumpster fire?
4 +
5 +
While that might be true, the reality is the web is continuing to be built on JavaScript, and generally written in TypeScript. While that reality stays true, there are some concerning pieces of our ecosystem that create more walled gardens and vendor lock-in. SSR is notorious for this as it prevents web apps from being portable, where you can easily host a piece of your stack somewhere else with little to no effort. That old age was more commonly known as Jamstack (Javascript APIs and Markdown), and in that period we saw a renasiance of web apps that were lightweight, efficient, and most importantly open and portable.
6 +
7 +
![image](https://dweb.mypinata.cloud/ipfs/bafybeiglk63npgshe6teogi5o5tljcmyx2ifddkwion4znbfpiceehnnn4)
8 +
9 +
The tides are turning and SSR is not always everyone's top pick these days. Developers from the Jamstack era long for the old times again, and new developers experience the frustration that comes with complicated frameworks such as Next.js. bhvr was built on a whim to fill the void Next.js leaves most developers, and it's mission now is to become a stack for the open web.
vocs.config.tsx +3 −5
1 -
import * as React from 'react'
2 1
import { defineConfig } from 'vocs'
3 2
4 3
export default defineConfig({
5 4
  title: 'bhvr',
6 5
  description: 'A stack made for the open web',
7 -
  logoUrl: "/icon-big.png",
8 6
  iconUrl: "/icon.svg",
9 -
  ogImageUrl: 'https://vocs.dev/api/og?logo=%logo&title=%title&description=%description',
10 7
  head({ path }) {
11 8
    const fcData = JSON.stringify({
12 9
      version: "next",
26 23
        <meta name='fc:frame' content={fcData} />
27 24
      )
28 25
    },
26 +
  logoUrl: "https://bhvr-docs.orbiter.website/icon-big.png",
29 27
  sidebar: [
30 28
    {
31 29
      text: 'Getting Started',
59 57
      items: [
60 58
        {
61 59
          text: 'Client',
62 -
          collapsed: false,
60 +
          collapsed: true,
63 61
          items: [
64 62
            {
65 63
              text: 'Orbiter',
77 75
        },
78 76
        {
79 77
          text: 'Server',
80 -
          collapsed: false,
78 +
          collapsed: true,
81 79
          items: [
82 80
            {
83 81
              text: 'Cloudflare Workers',