Murat's Bun, React & Vite template

Clone on GitHub

MBRV

Single port convenience

  • Server and client run on the 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 clear entry point

React hot module reloads

  • Edit client/App.tsx and save to test React HMR
  • Server will also reload when server/ or shared/ changes, using nodemon to restart the bun process

Shared files

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

Sane server-side rendering

  • SSR is done with explicit code, no framework magic: index.html is generated in run.ts
  • Enabled by default, with entry point in server/ssr.tsx

Express & socket.io

  • Express router in server/apis/http.ts
  • Socket.io setup in server/apis/sockets.ts

Instructions

  • Clone on GitHub & run bun install
  • Make application-specific changes in client/, shared/ & server/ dirs
  • bun dev provides hot reloads & source maps
  • bun prod builds & serves production
  • bun run.ts to run without any build process

Test the HTTP API & SSR:

Fetch clock from server
Response: "Hello from server 2024-10-05 12:09:46:685"

Test Socket.io:

Counter: 0