How to add source map to the esbuild configuration
I'm JS developer with 13 years of professional experience. I'm always happy to teach my craft.
Search for a command to run...
I'm JS developer with 13 years of professional experience. I'm always happy to teach my craft.
No comments yet. Be the first to comment.
In this series, I'll show simple but complete application set-up with esbuild.
This article will show how to start a project with esbuild as a bundler. I assume you have: npm & node installed - https://nodejs.org the folder you are working in is exposed with some HTTP server - Apache, Nginx, etc. Package init In an empty fol...
I’ve been working in programming for the last 16 years. Let’s see what changes I see in our industry that are enabled by generative AI. Rapid prototyping The last few months, I’ve been working on a set of WordPress plugins, related to event organizat...
Writing unit tests takes time and effort. Nonetheless, many teams insist on writing them anyway—that’s because of the benefits they bring to a project. Those benefits are mainly the following: fast feedback—unit tests speed up each iteration of twea...

Pure functions are the perfect case for unit testing. For a given input, we always expect the same output—there is no internal state involved. Let’s take a look at a few examples and some simple tests that check if the methods work as expected. Jasmi...

Let’s say you have a job interview in a few days. How should you prepare for it so that you can make an informed decision about joining the company, as well as make sure that your interests are taken care of? Prepare your questions An interview is a ...

Creating example projects is a common way of showing your skills to potential employers. Let’s take a look at what’s important to keep in mind when building personal projects with an eye toward impressing prospective employers. Simplicity Building ap...

In this article, I'll show you how to add a source map to the setup we developed so far in this series.
As we introduce any bundling or compiling step to our application, we start to have a difference between what's in our source code & what's run on the browser. This is especially problematic in debugging, or error logs - the browser shows us the building code, while we try to fix the issue in the source. Source map allows the browser to map the code that it executes to the source.
To enable the source map, we need to add to esbuild.config.js:
...
esbuildServe(
{
...
outfile: "www/main.js",
+ sourcemap: true,
},
{ root: "www" }
);
With this in place, after we restart the server we can see the source in the development tool in the browser. Here example from firefox:

You can check out my video course about esbuild.
We have seen how to add a source map to our setup. If you are interested in hearing when I have new esbuild content, you can sign up here: