# 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](https://how-to.dev/how-to-configure-esbuild-with-a-build-script).

# Dependency

This approach is based on [esbuild-serve](https://github.com/nativew/esbuild-serve) - a nice package that allows us to support two main use cases: building & development server. Let's install it first:
```sh
$ 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](https://github.com/nativew/esbuild-serve#use). `esbuild.config.js`:
```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:
```sh
$ 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`:
```JSON
{
  ...
  "type": "module",
...
```

# npm script update
Now, the final step is to replace the old npm scripts with calls to the current one:
```JSON
{
  ...
  "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:
```sh
$ 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](https://github.com/marcin-wosinek/esbuild-tutorial), the [branch](https://github.com/marcin-wosinek/esbuild-tutorial/tree/step-5).

You can check out my [video course about esbuild](https://bit.ly/esbuild-course).

# 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:

%%[esbuild]