out of scope: bun.serve()

15 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

HMR enabled by default in Bun's development server

Hot Module Replacement (HMR) is enabled by default when using Bun's full-stack development server. HMR updates modules in a running application without a full page reload, preserving application state.

Disable HMR in Bun.serve with hmr option

To disable HMR in Bun.serve, set the development option to { hmr: false }.

Request handling in Bun.serve() routes

In route handlers, you can parse JSON body with await req.json(), access headers with req.headers.get("HeaderName"), access URL parameters with req.params, and access query parameters with new URL(req.url) and url.searchParams.get("paramName").

HTTP method handlers in Bun.serve() API routes

Define API endpoints using HTTP method handlers (GET, POST, PUT, DELETE) as properties of a route object. Example: "/api/users": { async GET(req) { return Response.json(users); }, async POST(req) { const userData = await req.json(); return Response.json(user, { status: 201 }); } }. Each method receives the request object and should return a Response.

Define dynamic routes with URL parameters in Bun.serve()

Dynamic routes in Bun.serve() use URL parameters with the colon syntax. Single parameter example: "/api/users/:id" accesses req.params.id. Multiple parameters example: "/api/users/:userId/posts/:postId" accesses req.params.userId and req.params.postId. Wildcard routes use "/api/files/*" syntax and access the path via req.params["*"].

HTML imports as routes in Bun.serve()

Import HTML files into JavaScript/TypeScript files and pass them to the routes option in Bun.serve(). Example: import homepage from "./index.html"; then Bun.serve({ routes: { "/": homepage } }). When a request is made to a route with an HTML file, Bun automatically bundles the <script> and <link> tags in the HTML, exposes them as static routes, and serves the result.

HTML processing pipeline in Bun.serve()

Bun's HTML processing has five steps: (1) <script> Processing - transpiles TypeScript, JSX, and TSX, bundles imported dependencies, generates sourcemaps in development, minifies when development is not true; (2) <link> Processing - processes CSS imports and <link> tags, concatenates CSS files, rewrites URL and asset paths to include content-addressable hashes; (3) <img> & Asset Processing - rewrites links to assets to include content-addressable hashes, inlines small assets in CSS files into data: URLs; (4) HTML Rewriting - combines all <script> tags into a single tag with a content-addressable hash, combines all <link> tags into a single tag with a content-addressable hash, outputs a new HTML file; (5) Serving - exposes all output files as static routes.

Development mode features in Bun.serve()

When development: true is set in Bun.serve(), Bun includes the SourceMap header in responses so devtools can show original source code, disables minification, re-bundles assets on each request to a .html file, and enables hot module reloading (unless hmr: false is set). The development option can also be an object with properties like hmr: true and console: true.

Advanced development configuration with console logging

To echo console logs from the browser to the terminal, pass console: true in the development object in Bun.serve(). Example: development: { hmr: true, console: true }. Bun sends the logs over the existing HMR WebSocket connection.

Development vs Production mode comparison table

Source maps are enabled in development but disabled in production. Minification is disabled in development but enabled in production. Hot reloading is enabled in development but disabled in production. Asset bundling is done on each request in development but cached in production. Console logging from browser to terminal is enabled in development but disabled in production. Error details are detailed in development but minimal in production.

Production mode with runtime bundling in Bun.serve()

Setting development: false in Bun.serve() enables in-memory caching of bundled assets. Bun bundles assets lazily on the first request to an .html file and caches the result in memory until the server restarts. This setting also enables Cache-Control and ETag headers and minifies JavaScript/TypeScript/TSX/JSX files.

Inline environment variables in Bun.serve() frontend

Configure the env option in [serve.static] section of bunfig.toml to enable replacement of process.env.* references in frontend JavaScript/TypeScript at build time. Options: env = "PUBLIC_*" (recommended, only inline vars starting with PUBLIC_), env = "inline" (inline all environment variables), env = "disable" (disable, default). Bun only replaces literal process.env.FOO references, not import.meta.env or indirect access like const env = process.env; env.FOO.

Sourcemap configuration in Bun.serve() via bunfig.toml

Configure sourcemap generation in [serve.static] section of bunfig.toml with options: sourcemap = "linked" (serve sourcemaps in production too), sourcemap = "inline" (embed sourcemaps in chunks), sourcemap = "external" (emit .map files without MappingURL comment), sourcemap = false (never generate). In development, linked sourcemaps are generated by default. In production (development: false), sourcemaps are disabled by default.

HTMLRewriter for HTML bundling

Bun uses HTMLRewriter to scan for <script> and <link> tags in HTML files and uses them as entrypoints for Bun's bundler. Bun then generates an optimized bundle for the JavaScript/TypeScript/TSX/JSX and CSS files and serves the result.

React integration in Bun fullstack apps

To use React in Bun fullstack client-side code, import react-dom/client and use createRoot. Example: import { createRoot } from "react-dom/client"; const container = document.getElementById("root"); const root = createRoot(container!); root.render(<App />);

Give your agent this brain