Blog Thumb _ Building Serverless Application with AWS SAM and Typescript.png
profile picture Spandan Punwatkar
6 min read Nov 17, 2022
aws
sam

Building serverless application with AWS SAM and Typescript

aws
sam
Have you ever wanted to use Typescript in lambda functions, and wished to benefit from fast SAM acceleration while writing Typescript code and saving all of that juicy bill duration? Recently, AWS SAM has added Typescript compilation as a beta feature; which means now you can write serverless applications using Typescript.

Why should I use Typescript with AWS Lambda over simply writing Javascript?

Typescript is a free and open source language written as a super-set of Javascript, which allows the usage of type syntax. Many frontend and backend apps today use Typescript over Javascript for its enhanced performance and added features.
Let’s consider that you are developing an app where you are writing the front end in Angular, Vue, or any other Typescript framework. Using Typescript on the backend allows you not to change the language of your application and use it throughout. This will allow developers to know only a single language and prefer to use it everywhere across the board.
Typescript code also tends to be more efficient and compact than its counterpart written in Javascript. This is all thanks to the Typescript compiler, it points out compilation errors and type checks before actual run time; this reduces the risk of an exception occurring.

Initial setup

The following assumes that you have the following already installed:
  • A code editor
  • Node.js 14.x or higher
  • AWS SAM CLI
What I will be demonstrating here will be a simple serverless REST API. First, we use the AWS SAM to initialize the application then we make the necessary code changes to the template and the source files, and finally, we deploy the application.
Let’s get started!

Step 1

Let’s initialize our SAM application using AWS SAM.
Screenshot 2022-09-30 at 11.58.54 AM.png

Step 2

Select the AWS Quick Start Templates option here, as you would do for a normal SAM app. Here, we shall obtain a sample hello world template that will become the base of our application.
Screenshot 2022-09-30 at 12.03.24 PM.png

Step 3

Select the runtime for the application.
Screenshot 2022-09-30 at 12.03.37 PM.png
Since we are writing a typescript application, let’s select Node 16 (8). Note that for Typescript, Node 14.x works, but here I will be using 16.x for this example.

Step 4

Select the package type for the application.
Screenshot 2022-09-30 at 12.03.47 PM.png
Now here’s where it’s different. Go on ahead and select the Typescript option! Provide the name of the project and wait for the completion of the setup of the application.
Screenshot 2022-09-30 at 12.03.58 PM.png
And there we go! Our sample Typescript app is created.
The next step is to write the SAM template and the lambda function. Let’s take a look at the files inside this sample application.
Screenshot 2022-09-30 at 12.04.07 PM.png
Inside the hello-world folder lies our main lambda function, in app.ts.

Step 5

Let us also take a look at the package.json file inside the main lambda source folder.
Screenshot 2022-09-30 at 12.04.17 PM.png
Okay, that is a lot to unpack.
There are a lot of scripts already written and “compile”: “tsc” means we are using the typescript compiler here. All things required otherwise by typescript are written in devDependencies. We do not need to worry about them right now.

Step 6

Let’s take a look at the existing template of our application
Screenshot 2022-09-30 at 12.04.28 PM.png
Now, the main difference that you will see in this function template is the addition of a “Metadata” attribute. What this attribute does is it tells SAM that we want to use esbuild to compile our Typescript code.
What Minify does here is taking our file and remove whitespace, long variable names, and other things that unnecessarily increase file size; thus, Minifying reduces file size, which also leads to a relative decrease in lambda package size.

Step 7

We shall make changes to the template and the source file in this step.

Firstly, I am going to remove the events and hello-world folders, which we won’t be using. Instead, I will create a folder named “src” that will contain all of our source files.

Screenshot 2022-09-30 at 12.04.38 PM.png
Next, in the template, I will update our function with the necessary changes. This can be what you want for your application; However, here I will keep it simple.
Screenshot 2022-09-30 at 12.04.17 PM.png
Finally, I will write the source code for mainFunc.ts. This sample function will take two values, a, and b, and return their sum.
Screenshot 2022-09-30 at 12.04.57 PM.png
After our changes, our directory structure should look like this
Screenshot 2022-09-30 at 12.06.33 PM.png

Step 9

It is now time to build the application. To do this, use the following command
Screenshot 2022-09-30 at 12.06.55 PM.png
This tells SAM that we want to use the beta features.
Screenshot 2022-09-30 at 12.07.02 PM.png
Of course, this process may take some time. If you want to speed up this process, a very good option for this is SAM Accelerate, which helps us with this. Once the app is built and deployed, you can use sam sync to almost instantaneously update code on the fly on the cloud.
Next, it is time to deploy the application.
Screenshot 2022-09-30 at 12.07.12 PM.png

I have given all the default parameters to sam deploy except the stack name, which will determine the name of the stack on AWS Cloudformation.

Screenshot 2022-09-30 at 12.07.20 PM.png
And our app has now been deployed!

Step 10

It is now time to finally test our Typescript function. To do this, I will be making use of the Postman application.
The endpoint for our API here is on the /sum path with a POST method, on the Prod stage.
Screenshot 2022-09-30 at 12.07.32 PM.png Screenshot 2022-09-30 at 12.07.47 PM.png

Our application works!

And hence, we now know how to build a SAM Typescript function from scratch. To integrate such functions into other applications, all you need is an understanding of what components are required to be installed and the general process.
If you want to get started with the code from this document, here is a link to the source code.
Application Modernization Icon

Innovate faster, and go farther with serverless-native application development. Explore limitless possibilities with AntStack's serverless solutions. Empowering your business to achieve your most audacious goals.

Talk to us

Author(s)

Tags

Your Digital Journey deserves a great story.

Build one with us.

Recommended Blogs

Cookies Icon

These cookies are used to collect information about how you interact with this website and allow us to remember you. We use this information in order to improve and customize your browsing experience and for analytics and metrics about our visitors on this website.

If you decline, your information won’t be tracked when you visit this website. A single cookie will be used in your browser to remember your preference not to be tracked.

Talk to us