Serverless Development

Serverless-esbuild: Bundling JavaScript and TypeScript code

Serverless-esbuild: Bundling JavaScript and TypeScript code

By
Dharmendra Singh
February 9, 2022

Introduction

Bundling a JavaScript application takes time and when in your deployment process, the bundling processes add up and it can add a significant delay to your deployment process.

Typically, bundling a Javascript application requires you to write a configuration file. If you are using webpack to bundle your app, you must also write a webpack.config.js file.

This is where the Serverless-esbuild plugin comes in. This is a quick and easy JavaScript/TypeScript code bundling using esbuild. In this article, we’ll take a look at how we can use the Serverless-esbuild plugin to bundle JavaScript applications and use the serverless framework as an IAC and GitHub actions to deploy them to your AWS account.

Installing Serverless Framework

See installation guide here

Installing Serverless-esbuild and esbuild

  
npm i --save-dev serverless-esbuild esbuild
  

Folder Structure

The above image shows an overview of the folder structure

Serverless YAML File

The above image shows a simple Lambda function with the get method API endpoint and the Serverless-esbuild plugin configured.

Index JS File

The above image shows how the Lambda function imports uuidv4 from UUID and log it.

Note- Install the UUID module in the current repository.

Github Actions Setup

Create a {.github/workflows} directory in your repository and create a {main.yml} file within it.

Main YAML File

The above image shows an overview of deployment steps. Steps/Jobs may change based on requirements, such as format checking, tests, etc.

Note - Add AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY variables to your Github project under setting/secrets. See here for more information.

Next, push your changes to the server (Github project). Once changes are merged/pushed to the main branch, you can see deployments/workflows under the "actions" tab.

Afterward, click on "workflow" and you will see your jobs.

The above image shows a deployment job.

When you click on "job", you will see all the deployment steps for the job.

Once all jobs are done, check Lambda in your AWS console.

Conclusion

In this article, we have seen how to bundle Lambda functions using Serverless-esbuild and deploy them to AWS accounts via Github actions. Our discussion of Serverless-esbuild only touched the surface; there is a lot more to explore with Serverless-esbuild and esbuild, such as including extra files and esbuild config.

Please refer to the documentation for more information. The complete code for this article can be found here.