In this article, I'll show how to set up a complete development server for esbuild. It's a replacement for the half-successful approach I had in the previous post.

Dependency

This approach is based on esbuild-serve - a nice package that allows us to support two main use cases: building & development server. Let's install it first:

$ npm install esbuild-serve -D                                                         

> esbuild@0.9.7 postinstall /home/marcin/workspace/github/esbuild-tutorial/node_modules/esbuild-serve/node_modules/esbuild
> node install.js                                                                                                                                                                      

+ esbuild-serve@1.0.1                                                                                                                                                                  
added 3 packages from 1 contributor and audited 4 packages in 1.901s
found 0 vulnerabilities

esbuild configuration file

The configuration file we will use is a combination of the one developed in the previous post and the one presented in the esbuild-server documentation. esbuild.config.js:

#!/usr/bin/env node

import esbuildServe from "esbuild-serve";

esbuildServe(
  {
    logLevel: "info",
    entryPoints: ["src/index.js"],
    bundle: true,
    outfile: "www/main.js",
  },
  { root: "www" }
);

We can run this file with:

node esbuild.config.js - for building
node esbuild.config.js -w - for development server

If you run those scripts and get:

$ node esbuild.config.js
(node:86676) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/home/marcin/workspace/github/esbuild-tutorial/esbuild.config.js:3
import esbuildServe from "esbuild-serve";
^^^^^^

SyntaxError: Cannot use import statement outside a module

...

as I did, you will need to add to package.json:

{
  ...
  "type": "module",
...

npm script update

Now, the final step is to replace the old npm scripts with calls to the current one:

{
  ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "node esbuild.config.js",
    "start": "node esbuild.config.js -w"
  },
...

And it's working as expected:

$ npm run build

> esbuild-tutorial@1.0.0 build /home/marcin/workspace/github/esbuild-tutorial
> node esbuild.config.js

  www/main.js   151b 
  www/main.css   44b 

⚡ Done in 2ms

$ npm run start  

> esbuild-tutorial@1.0.0 start /home/marcin/workspace/github/esbuild-tutorial
> node esbuild.config.js -w

[watch] build finished, watching for changes...

Serving 🍛

Local → http://localhost:7000

Network → http://192.168.2.107:7000

Links

The repo, the branch.

You can check out my video course about esbuild.

Summary

We have seen how to set up a development server for esbuild. This setup has live reload & it's ready to use esbuild plugins. If you are interested in hearing when I have new esbuild content, you can sign up here:

How to add live reload to esbuild server

Comments

esbuild tutorial

How to add source map to the esbuild configuration

More from this blog

Changes in programming made possible with AI

Advantages of unit testing—with examples in Jasmine

Pure functions and basic tests in Jasmine

How to prepare for a job interview

How to build a demo project

Dependency

esbuild configuration file

npm script update

Links

Summary

Command Palette

Comments

esbuild tutorial

How to add source map to the esbuild configuration

More from this blog

Dependency

esbuild configuration file

npm script update

Links

Summary