chore: Updated primary docs pages
a1e1309f
10 file(s) · +162 −9
| 1 | + | # Cloudflare Pages |
|
| 2 | + | ||
| 3 | + | Coming soon |
| 1 | + | # GitHub Pages |
|
| 2 | + | ||
| 3 | + | Coming soon |
| 1 | + | # Orbiter |
|
| 2 | + | ||
| 3 | + | Coming soon |
| 1 | + | # Cloudflare Workers |
|
| 2 | + | ||
| 3 | + | Coming soon |
| 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 | + | :::: |
| 1 | - | ## `client` |
|
| 1 | + | # `client` |
|
| 2 | + | ||
| 3 | + | Coming soon |
| 1 | - | ## `server` |
|
| 1 | + | # `server` |
|
| 2 | + | ||
| 3 | + | Coming soon |
| 1 | - | ## `shared` |
|
| 1 | + | # `shared` |
|
| 2 | + | ||
| 3 | + | Coming soon |
| 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 | + |  |
|
| 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. |
| 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', |
|