DEV Community

Marcin Wosinek
Marcin Wosinek

Posted on • Edited on • Originally published at how-to.dev

How to add live reload to esbuild server

#esbuild #javascript

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
Enter fullscreen mode Exit fullscreen mode

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" } );
Enter fullscreen mode Exit fullscreen mode

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 ...
Enter fullscreen mode Exit fullscreen mode

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

{ ... "type": "module", ...
Enter fullscreen mode Exit fullscreen mode

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" }, ...
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)