Webpack 5 Builds for AWS Lambda Functions with TypeScript

Webpack 5 Builds for AWS Lambda Functions with TypeScript

Webpack 5 Builds for AWS Lambda Functions with TypeScript. Re-useable settings for all your TypeScript Lambda needs.

In a previous post, I wrote about self-destructing tweets which runs as an AWS Lambda function every night at midnight.

While that post was about the code itself, most of the AWS CDK infrastructure information had been written in a previous post about sending a serverless Slack message which demonstrated how to run an AWS Lambda on a cron timer.

Today’s post will be a short overview that bridges these together: it shows how I bundled the TypeScript code from the Twitter post with node modules and prepare it for deployment.

The Folder Structure

I am making assumptions here. The most “complex” set up I normally have for Lambdas is to write them in TypeScript and use Babel for transpilation.

Given this will be a familiar standing for most, let’s work with that.

Here is how most of my lambdas following this structure will look from within the function folder:

https://gist.github.com/okeeffed/9b1e7edc86caff76179d434850f063c0.js

.
├── nodemon.json
├── package-lock.json
├── package.json
├── src
│   ├── index.local.ts
│   ├── index.ts
│   └── function.ts
├── tsconfig.json
├── .babelrc
└── webpack.config.js

You might also note I have both an index.ts and index.local.ts file. index.ts in my project is generally the entry point for the lambda, where the index.local.ts file is normally just used for local development where I swap out my lambda handler for code that lets me run.

Both generally import the main function from another file (here denoted as function.ts) and just call it.

Webpack will bundle everything into one file later, so it is fine for me to structure the folder however I see fit.

Setting Up Your Own Project

Inside of a fresh npm project that houses a TypeScript lambda, we need to add to required Babel and Webpack dependencies:

https://gist.github.com/okeeffed/83313ff75f314653c67760251571320d.js

npm i --save-dev \
  ## install required babel deps
  @babel/core \
  @babel/preset-env \
  @babel/preset-typescript \
  ## webpack deps and loaders required
  webpack \
  webpack-cli \
  babel-loader \
  cache-loader \
  fork-ts-checker-webpack-plugin \
  ## finally install TypeScript
  typescript

webpack aws typescript programming developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire AWS Developer

Looking to Hire Professional AWS Developers? The technology inventions have demanded all businesses to use and manage cloud-based computing services and Amazon is dominating the cloud computing services provider in the world. **[Hire AWS...

Hire Dedicated AWS Developer

Want to Hire AWS Developer for cloud computing services? At **[HourlyDeveloper.io](https://hourlydeveloper.io/ "HourlyDeveloper.io")**, we leverage maximum benefits from the AWS platform ensuring prominent Solutions for business requirements....

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.

Developer Career Path: To Become a Team Lead or Stay a Developer?

For a developer, becoming a team leader can be a trap or open up opportunities for creating software. Two years ago, when I was a developer, ... by Oleg Sklyarov, Fullstack Developer at Skyeng company

Webpack 5 Builds for AWS Lambda Functions with TypeScript

Today’s post will be a short overview that bridges these together: it shows how I bundled the TypeScript code from the Twitter post with node modules and prepare it for deployment. Webpack 5 Builds for AWS Lambda Functions with TypeScript