bun-dev-server_skill

This skill helps you set up a high-performance Bun development server with hot module replacement and React Fast Refresh for frontend, API, or full-stack apps.

3

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill daleseo/bun-skills --skill bun-dev-server

SKILL.md11.3 KB

Overview

This skill sets up a high-performance Bun development server with Hot Module Replacement (HMR) and optional React Fast Refresh. It provides ready-made server templates for React frontends, Hono-based APIs, and full-stack apps, plus scripts, TypeScript config, and env setups to get you running quickly.

How this skill works

The skill generates a Bun.serve server that serves static assets, upgrades a WebSocket endpoint for HMR, and watches the src directory for file changes to notify connected clients. For APIs it uses Hono to define routes and middleware, and for full-stack projects it combines static serving with API routing and SPA fallback. Scripts enable hot reload, watch mode, production start, and build tasks.

When to use it

Bootstrapping a React SPA with fast local reload and live updates
Developing a REST or GraphQL API using Bun and Hono with auto-reload
Building a combined frontend + backend local server for full-stack development
Serving static files with live reload during frontend development
Testing HTTPS-only browser APIs locally with self-signed certs

Best practices

Use bun run --hot for fastest dev feedback and bun run --watch for lightweight watching
Limit file watching to the src directory to reduce CPU usage
Expose an HMR WebSocket endpoint and keep a small client script to reload or refresh modules
Keep environment variables in .env.development/.env.production and read process.env in server.ts
Add CORS middleware when proxying or calling APIs from a different origin

Example use cases

React dev server: serve public/index.html, static assets, and notify clients via /_hmr WebSocket when .tsx files change
API dev server: start a Hono app with /api routes, logger and CORS middleware, and auto-reload on code changes
Full-stack: mount API under /api and serve frontend from public with SPA fallback to index.html
Local HTTPS: run Bun.serve with TLS cert/key for testing Service Worker or WebRTC flows
Proxying: forward /api/* to an existing backend during frontend development

FAQ

Run the dev script with bun run --hot, ensure the client connects to ws://localhost:PORT/_hmr, and confirm the server watches src for changes.

Why is my WebSocket not connecting?

Check the port, firewall, correct ws URL, and that the server was started with the --hot flag or the Bun.serve websocket handler is active.