Webpack 5 and Typescript with Serverless framework

Quick tutorial on configuring webpack and typescript

Pre req: I hope you have NodeJs and serverless installed and configured. (Check this video if you haven’t. https://www.youtube.com/watch?v=NjZaXwNU08Q)

Initialising a new Serverless project: Run sls create -t aws-nodejs -p sls-server to create a new project. This will make use of aws-nodejs template to get us started.

Create serverless project

Install dev dependancies: Run yarn add -D webpack serverless-webpack typescript ts-loader This will create a package.json file, yarn.lock file and install dev dependancies.

Install dev dependancies

Add tsconfig.json: Since we intend to use typescript, we need a tsconfig.json file with our typescript configuration. I have my configuration file on a gist. Feel free to use it. Add that to your root directory. (Your code editor might show an error because we don’t have a src folder) https://gist.github.com/harshq/c9abe4d5c1c8641492cad3600c7c235f

Add webpack.config.js: Webpack needs a configuration file to work. I have a bare bone config that has ts-loader for typescript here. Add that to your root directory too.
https://gist.github.com/harshq/df1e25b12de12365d03da5c18d754480

Create your app folder: Create a src directory in your app folder. This is where you will have your .ts files. Rename your handler.js file to handler.ts and move it inside the src folder. (You will have change your handler by adding any type to event object. Check the screenshot below)

Hello handler

Finally, we need to make some changes in our serverless.yml file. Heres my configuration in a gist. I’ve also added some comments there. https://gist.github.com/harshq/2ec43934c51484fbb2ee2d6755046966

Now you can run sls webpack to build your project.

Create webpack bundles

You’ll notice that it creates a new folder in your root directory called .webpack. It should have separate bundles for your functions. (Don’t forget to include this folder in your .gitignore)

Deploy with webpack

Your serverless setup now uses webpack 5 and typescript. Happy coding!

Software product engineer | UX enthusiast | Speaker | *highly opinionated blog*

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store