Setting up a Project with ESBuild

In this article we will set up a project with ESBuild from scratch. We will cover how to work with a dev server and as well how to trigger a production build. But first, I would like to introduce you to ESBuild and dive a bit deeper why it is getting more and more popularity. Let's start.

What is ESBuild good for?

When working with NPM (web-)projects we often have to deal with many different files. Those can be html templates, css files with it's common processors (like postcss or sass), JavaScript code files (plain JS, TypeScript or for instance even more exotic in PureScript) and different image or in general assets files. In HTML files we often reference the other files. CSS, if written with a pre-processor like sass, needs to be translated into plain CSS and minified in production. Plain JavaScript files are very rare as well. TypeScript is getting more and popular, so we need a Transpiler which will turn our TypeScript code into JavaScript Code that can be understood by the browsers. Furthermore, there is Babel, which will turn modern features of JavaScript into code that older browsers will understand as well. Regarding the assets we need to copy them to the target folder and reference those files in our html templates or css files.

It's clear, that we do not want to do all those steps manually. And this is where a builder/packer like ESBuild or Webpack are used. Esbuild will process those steps and create a so called bundle which we can use in out browser to run our program.

Why ESBuild is so popular?

If we have already other builder/packer like Webpack, Parcel or Rollup, why do we need another one? And why is ESBuild is getting more and more tracktion?

Let's take webpack, as a de-facto leading standard, and compare it to ESBuild.

Simplicity: Webpack is said to be complicated. Starting with a project may be simple and fast, but maintaining a big project requires a deep understanding of how plug-ins for webpack work and which configuration step to take to achieve the result. If we look at the webpack file which is emitted for a react application, it is not very trivial. ESBuild promises to be more simple and more accessible to beginners.
Speed: If you already have worked with a build tool like Webpack, chances are high that you reached a point where Webpack is taking up to several seconds to rebuild/rebundle a project. This can be pretty annoying when your project grows over times, since the build times will get even worse. According to the marketing of ESBuild, it is 10x faster than webpack.

If it will remain as ESBuild will grow in features, time will show. Usually, the bigger the user base gets the more features are requested. Hence, the tool becomes more complicated and gets slower as well. (At least, this is what happened to Webpack).

Setting Up a Project with ESBuild

Step 1: Project Initialization

Create a new directory for your project.
Initialize a new Node.js project by running npm init -y in your terminal. This command creates a package.json file with default values.

Step 2: Installing ESBuild

Install ESBuild by running npm install esbuild --save-dev. This adds ESBuild to your project as a development dependency.

Step 3: Configuration

Create an esbuild.config.js file in your project root.
In this file, you can configure ESBuild. A basic configuration might look like this:javascript

require('esbuild').build({ entryPoints: ['src/index.js'], bundle: true, outfile: 'dist/bundle.js', }).catch(() => process.exit(1)) This script tells ESBuild to bundle the src/index.js file and output it to dist/bundle.js.

Step 4: Adding Scripts

In your package.json file, add a script to run ESBuild:

"scripts": {
  "build": "node esbuild.config.js"
}

Step 5: Building Your Project

Run npm run build to bundle your project. ESBuild will read your configuration and create the output file as specified.

Conclusion

Setting up a project with ESBuild is straightforward and can dramatically improve your development workflow. Its speed and simplicity make it an excellent choice for modern web development. As you become more familiar with ESBuild, you can explore its advanced features and plugins to further optimize your project.

Thank you for reading this far! Let’s connect. You can @ me on X (@debilofant) with comments, or feel free to follow. Please like/share this article so that it reaches others as well.