Fullstack Dev Server

What It Is

Bun 1.3 Fullstack Dev Server with HMR. React without bundler (no Vite/Webpack).

Example: elysia-fullstack-example

Setup

Install + use Elysia Static:

import { Elysia } from 'elysia'
import { staticPlugin } from '@elysiajs/static'

new Elysia()
  .use(await staticPlugin())  // await required for HMR hooks
  .listen(3000)

Create public/index.html + public/index.tsx:

<!-- public/index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Elysia React App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./index.tsx"></script>
  </body>
</html>

// public/index.tsx
import { useState } from 'react'
import { createRoot } from 'react-dom/client'

function App() {
  const [count, setCount] = useState(0)
  const increase = () => setCount((c) => c + 1)
  
  return (
    <main>
      <h2>{count}</h2>
      <button onClick={increase}>Increase</button>
    </main>
  )
}

const root = createRoot(document.getElementById('root')!)
root.render(<App />)

Enable JSX in tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

Navigate to http://localhost:3000/public.

Frontend + backend in single project. No bundler. Works with HMR, Tailwind, Tanstack Query, Eden Treaty, path alias.

Custom Prefix

.use(await staticPlugin({ prefix: '/' }))

Serves at / instead of /public.

Tailwind CSS

Install:

bun add tailwindcss@4
bun add -d bun-plugin-tailwind

Create bunfig.toml:

[serve.static]
plugins = ["bun-plugin-tailwind"]

Create public/global.css:

@tailwind base;

Add to HTML or TS:

<link rel="stylesheet" href="tailwindcss">

Or:

import './global.css'

Path Alias

Add to tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@public/*": ["public/*"]
    }
  }
}

Use:

import '@public/global.css'

Works out of box.

Production Build

bun build --compile --target bun --outfile server src/index.ts

Creates single executable server. Include public folder when running.

2.3 KiB Raw Blame History