@hyrious/esbuild-serve

esbuild-serve

Usage

Serve your static site:

> npx @hyrious/esbuild-serve
[esbuild-serve] serving http://localhost:3000

Build your static site:

> npx @hyrious/esbuild-serve --build

Other options:

> npx @hyrious/esbuild-serve --help
usage:
  esbuild-serve [--open] [servedir]   -- serve a folder
  esbuild-serve --build [servedir]    -- bundle scripts
  esbuild-serve --dry-run [servedir]  -- print `esbuild --serve ...`
  esbuild-serve init                  -- create an example index.html

Description

This is a simple wrapper of esbuild --serve, which enables auto reload and zero-config development.

Difference to vite:

• Vite doesn't do bundle (at least, your code) in development for the best speed. This tool does bundle everything into a single file.
• index.html in vite is part of your source code, development and production will treat it differently. While in this tool, index.html is part of your production site.
• You can have multiple entry points, but if you do that, their output file names must be the same with the source files', this is limited by esbuild build options.
  e.g. if you request js/app.js and js/home.js, there must be some-folder/app.ts and some-folder/home.js in your source code.

Zero-config Assumptions

This tool follows the example usage from esbuild document, which gives:

esbuild src/app.js --servedir=www --outdir=www/js --bundle

That is to say, you need a public folder with index.html in it to formalize a static site.

Recommended folder names: public, www, dist, (root folder).

Run esbuild-serve init to create an example folder with an example index.html.

Config

Create an esbuild.config.ts:

import { defineConfig } from "@hyrious/esbuild-serve";

export default defineConfig({
  serve: {},
  build: {},
});

Todo

• Access metafile in serve mode.
  Due to this problem, currently it must run esbuild.build to generate metafile to search dependency files to watch for auto reload.

License

MIT @ hyrious