Murat's Bun, React & Vite template

mbrv.org

Bun backend & React frontend on the same port,
all in TypeScript.


GitHub Clone on GitHub Download .zip

Benefits

Single port convenience

  • Server & client run on the same process, same port
  • No proxies or CORS issues

Bun's flexibility

  • Speed aside, bun makes it a pleasure to run TypeScript without a transpiler
  • run.ts as single entry point

React hot module reloads

  • UI code changes appear instantly in the browser
  • Page will reload if any server code is changed

Shared files

  • Server & client can use shared TypeScript interfaces, types, and functions via shared/ folder

Sane server-side rendering

  • SSR is done with explicit code, no framework magic
  • Enabled by default, with entry point in server/ssr.tsx
  • Use --ssr=false to disable SSR

Instructions

Setup

  • bun i to install packages
  • bun run dev provides hot reloads & source maps
  • bun run build prepares production build
  • bun run prod serves production

Make changes

  • client/ contains React UI code
  • shared/ folder contains shared interfaces, types, and functions that both client & server can use
  • server/ contains http & socket APIs
    • Express endpoints in server/apis/http.ts
    • Socket.io setup in server/apis/sockets.ts

Demo

Test the HTTP API & SSR:

Fetch clock from server
Response: "Hello from server 2024-11-20 22:52:07:905"

Test Socket.io:

Counter: 0

Test URL Router:

Current route: /
Navigate to /
Navigate to /page1
Navigate to /page2

By Murat