esbuild Development Server with Live Reload

A simple setup for running a development server with esbuild that includes live reload functionality. Based on "Run a development server with live reload" by Jake Lazaroff

Overview

This project demonstrates how to use esbuild as a development server with automatic page reloading when files change.

Project Structure

src/
├── index.html
├── index.ts
├── style.css
└── livereload.js

Quick Start

Review these commands as dev in package.json scripts:

{
  "scripts": {
    "dev": "esbuild src/index.html src/index.ts src/style.css --bundle --watch --outdir=build --servedir=build --loader:.html=copy --inject:src/livereload.js"
  }
}

Then run:

npm run dev

How It Works

The command breaks down into these components:

• esbuild src/index.html src/index.ts src/style.css - Processes the main entry points
• --bundle - Combines all imports into a single file
• --watch - Rebuilds on file changes
• --outdir=build - Outputs to build directory
• --servedir=build - Serves content from build directory
• --loader:.html=copy - Copies HTML files without processing
• --inject:src/livereload.js - Adds live reload functionality

Live Reload Setup

Create src/livereload.js with:

new EventSource("/esbuild").addEventListener("change", () => location.reload());

Production Build

For production, simply remove the --watch and --inject:src/livereload.js flags.

License

MIT