How to set up a dev server with esbuild
In this article, I'll show how to add a development server to the simple application we started in part 1.
Possible approaches
There are two alternative ways we can achieve our goal.
Autorebuild
The first is to have the same setup we had in part 1, but watch files automatically rebuild them. This is provided by the --watch
option - the documation. In our case, we can define a new npm script in package.json
:
{
...
"scripts": {
...
"scripts": {
...
"watch": "esbuild --bundle src/index.js --outfile=www/main.js --watch"
...
With this in place, we can start the watch with:
$ npm run watch
> esbuild-tutorial@1.0.0 watch /home/marcin/workspace/github/esbuild-tutorial
> esbuild --bundle src/index.js --outfile=www/main.js --watch
[watch] build finished, watching for changes...
Then, after each change, the code is rebuilt:
[watch] build started (change: "src/index.js")
[watch] build finished
We access the page in the same as before - in my case, I have it at http://localhost/github/esbuild-tutorial/www/
Development server
Another approach is to use the development server provided by esbuild. From the approaches presented in the documentation, the server everything one is simple to set up in our case.
When we add to package.json
:
{
...
"scripts": {
...
"scripts": {
...
"start": "esbuild --bundle src/index.js --outfile=www/main.js --servedir=www",
...
We can start a dev server with:
npm run start
> esbuild-tutorial@1.0.0 start /home/marcin/workspace/github/esbuild-tutorial
> esbuild --bundle src/index.js --outfile=www/main.js --servedir=www
> Local: http://127.0.0.1:8000/
> Network: http://192.168.2.107:8000/
> Network: http://172.18.0.1:8000/
> Network: http://172.17.0.1:8000/
Then, every reload of the page cause the build to be rerun:
127.0.0.1:44180 - "GET /" 200 [1ms]
127.0.0.1:44180 - "GET /main.js" 200 [0ms]
Not building ahead of time is a neat feature possible thanks to lighting fast builds in esbuild.
Autorebuild vs. development server
If you have an HTTP server set up to point out to your work space, the auto rebuild can be a quick & dirty way to improve your workflow. Otherwise, the dev server is the way to go.
Don't repeat yourself
With our current scripts, we have:
{
...
"scripts": {
...
"build": "esbuild --bundle src/index.js --outfile=www/main.js",
"start": "esbuild --bundle src/index.js --outfile=www/main.js --servedir=www",
"watch": "esbuild --bundle src/index.js --outfile=www/main.js --watch"
...
The part repeated in all 3 places - esbuild --bundle src/index.js --outfile=www/main.js
will easily become a headache when needed to be changed. We can reuse the shortest command and add the additional flag to it in the others:
{
...
"scripts": {
...
"build": "esbuild --bundle src/index.js --outfile=www/main.js",
"start": "npm run build -- --servedir=www",
"watch": "npm run build -- --watch"
},
...
Links
The code is in in example repository, in the step-2 branch.
You can check out my video course about esbuild.
Summary
In this article, we have seen how to set up a dev server. In the next article, we will make our application a bit more complicated & we will add styling. If you want to be updated when the next article is published, you can sign up here: