DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 970,177 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Marcin Wosinek
Marcin Wosinek

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

How to add live reload to esbuild server

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)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!