Quick tutorial on configuring webpack and typescript
Pre req: I hope you have
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.
Install dev dependancies: Run
yarn add -D webpack serverless-webpack typescript ts-loader This will create a
yarn.lock file and 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.
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)
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.
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)
Your serverless setup now uses webpack 5 and typescript. Happy coding!