The Secret to Lightning-Fast Web Development

How One Tool Can Save You Time and Boost Performance

Photo by Mohammad Rahmani on Unsplash

As web applications grow in size and complexity, so too does the process of building and bundling the various assets required for them to function properly. This can be a time-consuming and frustrating process, especially for us developers who need to frequently rebuild and update our applications.

Fortunately, there is a solution that can significantly streamline the build process, saving developers time and improving overall application performance. Esbuild is a modern build tool that leverages advanced techniques to quickly and efficiently compile and bundle web applications.

One of the key benefits of using Esbuild is its seamless integration with TypeScript, a popular language for building scalable web applications. With Esbuild, developers can easily incorporate TypeScript into builds, allowing for faster and more reliable compilation of TypeScript code. This can help catch bugs earlier in the development process and improve overall code quality.

In this post, we’ll explore the benefits of using Esbuild with TypeScript and discuss how it can help us achieve faster and more efficient web development. So whether you’re an experienced developer looking to streamline your workflow or a newcomer to web development looking for ways to improve your skills, read on to find out how Esbuild and TypeScript can help you achieve your goals.

Stop to talk…show me the code 😎

….so the idea is to work in Typescript and make the build to generate Javascript files compressed and make them readable for the FrontEnd side

1. Create a directory in your project and generate the main configuration

> mkdir project && cd project && npm init --y

2. Install the Esbuild and typescript packages into the dev dependencies

> npm i esbuild typescript --save-dev

3. Create the folder structure to save our Typescript code. For this example, every .ts file contains some piece of code related to a specific functionality

/project
├── /src 
│   ├── /ts
│   │   ├── variables.ts
│   │   ├── elements.ts
│   │   ├── form.ts
...

4. Create the folder structure where each .ts file will be converted to a compressed javascript file automatically when hitting the build

/project
├── /public
│   ├── /js (👈 in this folder each .ts will be converted to .js)
│   ├── /images
│   ├── /css
│   ├── index.html
...

5. Create a file in the root of the project called tsconfig.json to set the config of Typescript for the project

/project
├── /public
├── /src
│   package.js
│   tsconfig.json 👈
...

6. Add the code below into the file tsconfig.json

7. Create a file in the root of the project called build.js, in this file we are going to add the config to generate the bundle

/project
├── /public
├── /src
│   package.js
│   tsconfig.json
│   build.js 👈
...

8. Add the code below into the file build.js to set the config for the build

Keep in mind about entryPoints will generate the .js files following the order of the file in that array declared 🫡

9. Now you will need to go to the package.json file to set the script in order to run the Esbuild compiler

{
  "name": "project",
  "version": "0.0.1",
  "description": "",
  "scripts": {
    "build": "node build.js" <==
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "esbuild": "^0.17.10",
    "typescript": "^4.9.5"
  }
}

10. Perfect 🎉! Now just to need run the command:

> npm run build

And the result will be:

/project
├── /public
│   ├── /js
│   │   ├── variables.js
│   │   ├── elements.js
│   │   ├── form.js
...

So, that means you can call each .js file independently in your .html file such as a simple bundle file 🏆

<script src="./js/form.js"></script>

With this awesome implementation, you just have to upload the public folder to your server with everything transpilated/minified previously 😻

If you want to add environment vars to your project follow this other article 👇

Adding Environments vars to Esbuild

Let me know if you liked it…or if you want to know anything else 😉
…and don’t forget to give me lots of claps 😁