SvelteKit hot reload in development
When running a SvelteKit dev server with Bun, edits to source files like `src/routes/+page.svelte` are automatically hot-reloaded in the browser without requiring a full page refresh.
guides
347 notes in this subject, read out of this brain and free to use. This is page 3 of 6.
SvelteKit with Bun production build adapter
To build a SvelteKit app for production with Bun, install the `svelte-adapter-bun` package with `bun add -D svelte-adapter-bun`. Then update the `svelte.config.js` file to import and use this adapter instead of the default `@sveltejs/adapter-auto`. After configuration, build the production bundle with `bun --bun run build`. The built output can be started with `bun ./build/index.js`.
Allow non-root Bun process to listen on ports 80 and 443
To permanently allow a Bun application running as a non-root user to listen on ports 80 or 443, run the command: setcap CAP_NET_BIND_SERVICE=+eip ~/.bun/bin/bun. This step is not necessary when running as root. By default, non-root users cannot listen on these ports.
systemd service file location for Bun applications
Create a systemd service file in the directory /lib/systemd/system/ to run a Bun application as a daemon with systemd.
systemd service file template for Bun
A typical systemd service file for running a Bun application includes the following sections and fields: [Unit] section with Description (describe the app) and After=network.target (start after network is available); [Service] section with Type=simple (usually), User (which user runs the app), WorkingDirectory (application root directory), ExecStart (command to start the app, requires absolute paths), and Restart=always (restart policy); [Install] section with WantedBy=multi-user.target (start automatically).
ExecStart command for Bun in systemd service
The ExecStart field in a systemd service file for Bun must use absolute paths. Example: ExecStart=/home/YOUR_USER/.bun/bin/bun run index.ts
Restart policy options in systemd service
The Restart field accepts the following values: no, on-success, on-failure, on-abnormal, on-watchdog, on-abort, or always.
Type field options in systemd service
The Type field in a systemd service file can be set to different values. For Bun applications, 'simple' is usually used. For all available options, refer to https://www.freedesktop.org/software/systemd/man/systemd.service.html#Type=
Enable and start a Bun systemd service
Use 'systemctl enable my-app' to enable the service (requires sudo permissions) so it starts automatically on reboot. Use 'systemctl start my-app' to start the service immediately without rebooting.
Update a systemd service configuration
After editing a systemd service file, run 'systemctl daemon-reload' to tell systemd that configuration files have changed.
Common systemd commands for Bun services
systemctl daemon-reload — tell systemd that configuration files changed; systemctl enable my-app — enable the app to allow auto-start; systemctl disable my-app — disable the app to turn off auto-start; systemctl start my-app — start the app if stopped; systemctl stop my-app — stop the app; systemctl restart my-app — restart the app.
Check systemd service status
Use the command 'systemctl status my-app' to check the status of a Bun application running under systemd. The output shows whether the service is loaded, active, the main process ID, memory usage, CPU time, and the running command.
Redis client handles connections automatically
The Redis client handles connections automatically. You do not need to connect or disconnect manually for basic operations.
Upstash Redis connection with TLS
Upstash is a fully managed Redis database as a service that works with the Redis API. TLS is enabled by default for all Upstash Redis databases. When connecting with Bun's Redis client, use the TLS connection details; the URL starts with rediss://.
Redis client reads REDIS_URL environment variable
Bun's native Redis client reads connection information from the REDIS_URL environment variable by default. Set this environment variable in your .env file with the Redis endpoint (not the REST URL).
Create RedisClient with custom connection
You can create a custom Redis client using the RedisClient constructor: new RedisClient(process.env.REDIS_URL). This allows you to explicitly pass the connection string.
Redis client basic operations example
Example of using Bun's Redis client for basic operations: import { redis } from "bun"; // Get a value let counter = await redis.get("counter"); // Set a value if it doesn't exist if (!counter) { await redis.set("counter", "0"); } // Increment the counter await redis.incr("counter"); // Get the updated value counter = await redis.get("counter"); console.log(counter); This example demonstrates reading and writing keys to a Redis database.
TanStack Start: Deploy with Nitro to Bun
Add Nitro to the project with: bun add nitro. Then in vite.config.ts, import nitro and add the plugin: import { nitro } from "nitro/vite"; plugins: [tanstackStart(), nitro({ preset: "bun" }), ...]
TanStack Start: Nitro with Bun build and start scripts
When using Nitro with Bun, configure package.json with: "build": "bun --bun vite build" and "start": "bun run .output/server/index.mjs". The .output files are created by Nitro when running bun run build.
TanStack Start: Deploy Nitro to Vercel
When deploying to Vercel, do not use the 'bun' Nitro preset. Instead, configure Nitro in vite.config.ts with: nitro({ preset: "vercel", vercel: { functions: { runtime: "bun1.x" } } }). Alternatively, add "bunVersion": "1.x" to vercel.json. A custom start script is not needed when deploying to Vercel.
TanStack Start: Custom Bun server default port
The custom TanStack Start production server for Bun listens on port 3000 by default. Set the PORT environment variable to use a different port.
TanStack Start: Custom server asset preloading configuration
The custom Bun server for TanStack Start supports environment variables for asset preloading: PORT (default 3000), ASSET_PRELOAD_MAX_SIZE (default 5242880 = 5MB), ASSET_PRELOAD_INCLUDE_PATTERNS (comma-separated glob patterns), ASSET_PRELOAD_EXCLUDE_PATTERNS (comma-separated glob patterns), ASSET_PRELOAD_VERBOSE_LOGGING (boolean, default false), ASSET_PRELOAD_ENABLE_ETAG (boolean, default true), ASSET_PRELOAD_ENABLE_GZIP (boolean, default true), ASSET_PRELOAD_GZIP_MIN_SIZE (default 1024 = 1KB), ASSET_PRELOAD_GZIP_MIME_TYPES (default: text/,application/javascript,application/json,application/xml,image/svg+xml).
TanStack Start: Custom server build and run commands
To build and run the TanStack Start app with custom Bun server, run: bun run build followed by bun run start
TanStack Start: Framework overview
TanStack Start is a full-stack framework powered by TanStack Router and Vite. It supports full-document SSR, streaming, server functions, and bundling.
TanStack Start: Custom server adds start script to package.json
When using a custom Bun server, add to package.json scripts: "start": "bun run server.ts"
TanStack Start: Bun custom server features
The TanStack Start custom Bun server implements intelligent static asset loading with a hybrid strategy: small files are preloaded into memory for fast access, and larger files are served on-demand from disk. It includes configurable file filtering with include/exclude glob patterns, memory-efficient response generation, production-ready caching headers, ETag support for cache validation, and Gzip compression support.
TanStack Start: Start dev server with Bun
To start the Vite dev server with Bun in a TanStack Start project, run: bun --bun run dev
TanStack Start: Create new app with Bun
To create a new TanStack Start app, run: bunx @tanstack/cli create my-tanstack-app
TanStack Start: Configure package.json scripts
In package.json scripts, prefix Vite CLI commands with 'bun --bun' for dev, build, and preview. Example: "dev": "bun --bun vite dev", "build": "bun --bun vite build", "serve": "bun --bun vite preview"
Configure Vite dev script to use Bun
In `package.json`, update the `"dev"` script from `"vite"` to `"bunx --bun vite"` to simplify running the development server with `bun run dev`.
Create new Vite project with Bun
Use `bun create vite my-app` to scaffold a new Vite project. This will prompt you to select a framework and variant (e.g., React with TypeScript + SWC), then create the project directory.
Run Vite development server with Bun
Use `bunx --bun vite` to start the Vite development server. The `--bun` flag tells Bun to run Vite's CLI using `bun` instead of `node`. By default, Bun respects Vite's `#!/usr/bin/env node` shebang line.
Build Vite app for production with Bun
Use `bunx --bun vite build` to build your Vite app for production.
Vite works with Bun without extra configuration
Vite is compatible with Bun and requires no additional configuration to use together.
Consider HTML imports as alternative to Vite
Many projects can achieve faster builds and reduce hundreds of dependencies by switching to Bun's HTML imports feature instead of using Vite.
Install dependencies in Vite project
After creating a Vite project with `bun create vite`, navigate to the project directory and run `bun install` to install dependencies.
Extract Open Graph meta tags with HTMLRewriter
Use HTMLRewriter with the CSS selector 'meta[property^="og:"]' to extract Open Graph metadata from HTML. Access the property attribute with el.getAttribute("property") and the content with el.getAttribute("content"). Remove the "og:" prefix from the property name to get the metadata key.
Extract Twitter Card meta tags as fallback
Use HTMLRewriter with the CSS selector 'meta[name^="twitter:"]' to extract Twitter Card metadata from HTML. Access the name attribute with el.getAttribute("name") and the content with el.getAttribute("content"). Only use Twitter Card data if Open Graph data is not already present for that key.
Extract description from regular meta tag
Use HTMLRewriter with the CSS selector 'meta[name="description"]' to extract the description meta tag. Access the content with el.getAttribute("content"). This serves as a fallback when Open Graph and Twitter Card descriptions are not available.
Extract title from title tag
Use HTMLRewriter with the CSS selector 'title' and the text handler to extract the page title. Access the text content with text.text. This serves as a fallback when Open Graph titles are not available.
Transform HTML response with HTMLRewriter
Call rewriter.transform(response) to process an HTML response, then chain .blob() to complete the transformation. This consumes the response and applies all the registered handlers.
Convert relative image URLs to absolute URLs
Use the URL constructor with the relative URL and the base URL to convert relative URLs to absolute URLs: new URL(metadata.image, url).href. Wrap in a try-catch block to handle parsing failures gracefully.
Social metadata extraction pattern
When extracting social metadata using HTMLRewriter, prioritize Open Graph tags first, then fall back to Twitter Card tags, then to regular meta tags, and finally to the title tag. Only update metadata fields if they are not already populated by higher-priority sources.
HTMLRewriter use case: link previews and web scrapers
Bun's HTMLRewriter API can be used to build link previews, social media cards, or web scrapers by extracting social share images and Open Graph metadata from HTML.
File upload example with FormData
Example: Handle a multipart form at the /action endpoint by calling const formdata = await req.formData(), extracting fields with formdata.get("fieldName"), validating the file exists, then writing it with await Bun.write("filename.png", profilePicture).
FormData upload with Bun.serve
To upload files via HTTP with Bun, use the FormData API. Parse the incoming request with req.formData() to get a FormData instance, extract fields using formData.get(fieldName), then write the Blob to disk with Bun.write().
Example: hot reload HTTP server with Bun.serve
Bun.serve({ port: 3000, fetch(req) { return new Response("Hello world"); }, });
Hot reload HTTP servers without restarting bun process
Bun detects when you are running an HTTP server with Bun.serve(). It reloads your fetch handler when source files change, without restarting the bun process. This makes hot reloads nearly instantaneous.
Command: bun --hot run for hot reloading
Run a file with hot reloading enabled using the command: bun --hot run index.ts
--hot flag runs file with hot reloading
The --hot flag runs a file with hot reloading enabled. When any module or file changes, Bun re-runs the file.
Hot reloading does not reload the browser page
Hot reloading does not reload the page in your browser.
SSE with async generator example
To implement SSE using an async generator in Bun, pass an async generator function directly to new Response. Each yield flushes a chunk to the client. When the client disconnects, the generator's finally block runs for cleanup. Example: ```ts Bun.serve({ port: 3000, routes: { "/events": (req, server) => { server.timeout(req, 0); return new Response( async function* () { yield `data: connected at ${Date.now()}\n\n`; while (true) { await Bun.sleep(5000); yield `data: tick ${Date.now()}\n\n`; } }, { headers: { "Content-Type": "text/event-stream", "Cache-Control": "no-cache", }, }, ); }, }, }); ```
SSE with ReadableStream example
To implement SSE using a ReadableStream in Bun (better for events from callbacks, message brokers, or external pushes), create a ReadableStream where the start() method sets up listeners and enqueues initial data, and the cancel() method runs automatically when the client disconnects to release resources. Example: ```ts Bun.serve({ port: 3000, routes: { "/events": (req, server) => { server.timeout(req, 0); let timer: Timer; const stream = new ReadableStream({ start(controller) { controller.enqueue(`data: connected at ${Date.now()}\n\n`); timer = setInterval(() => { controller.enqueue(`data: tick ${Date.now()}\n\n`); }, 5000); }, cancel() { clearInterval(timer); }, }); return new Response(stream, { headers: { "Content-Type": "text/event-stream", "Cache-Control": "no-cache", }, }); }, }, }); ```
Azure Artifacts configuration with bunfig.toml
To configure Azure Artifacts for `bun install`, create a `bunfig.toml` file in the project root with an `[install.registry]` section. Set `url` to the Azure Artifacts registry URL (replace `my-azure-artifacts-user` with the actual username, for example: `https://pkgs.dev.azure.com/my-azure-artifacts-user/_packaging/my-azure-artifacts-user/npm/registry`). Set `username` to the Azure Artifacts username. Set `password` to either a literal password or an environment variable reference like `$NPM_PASSWORD`. Bun automatically reads `.env` files, so credentials can be placed there.
Do not base64 encode passwords for Bun's Azure Artifacts
Unlike Azure Artifacts' standard `.npmrc` instructions, do not base64 encode the password when configuring `bun install`. Bun automatically base64 encodes the password if needed. If a password ends with `==`, it is probably already base64 encoded and should be decoded before use.
Configure Azure Artifacts using NPM_CONFIG_REGISTRY environment variable
To configure Azure Artifacts without a `bunfig.toml` file, set the `NPM_CONFIG_REGISTRY` environment variable. The URL must include `:username` and `:_password` as query parameters. Example format: `https://pkgs.dev.azure.com/my-azure-artifacts-user/_packaging/my-azure-artifacts-user/npm/registry/:username=<USERNAME>:_password=<PASSWORD>`.
Decode base64 passwords for Azure Artifacts
To decode a base64-encoded password, use the browser console with `atob("<base64-encoded password>")`, or use the command line tool `echo "base64-encoded-password" | base64 --decode`. Note that using the command line tool may leave the password in shell history.
setup-bun action version specification
The setup-bun action accepts a 'with' section containing 'bun-version' parameter. Valid values include 'latest' for the latest stable release or 'canary' for the canary build.
setup-bun action basic usage
To use the setup-bun action, add the step 'uses: oven-sh/setup-bun@v2' in your GitHub Actions workflow. This should be placed before running any bun or bunx commands.
Minimal GitHub Actions workflow with Bun
A minimal workflow file runs on ubuntu-latest, uses actions/checkout@v4 to check out code, then uses oven-sh/setup-bun@v2 to install Bun, and can then run bun commands like 'bun install'.