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
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)