How to Create an API with TypeScript on AWS with Serverless

Want to learn how to quickly and easily create an API using TypeScript? This video will teach you to set up a serverless project and deploy it to AWS.
interface CityData {
name: string;
state: string;
description: string;
mayor: string;
population: number;
zipCodes?: string;
}
const cityData: { [key: string]: CityData } = {
newyork: {
name: 'New York',
state: 'New York',
description:
'New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean. At its core is Manhattan, a densely populated borough that’s among the world’s major commercial, financial and cultural centers. Its iconic sites include skyscrapers such as the Empire State Building and sprawling Central Park. Broadway theater is staged in neon-lit Times Square.',
mayor: 'Bill de Blasio',
population: 8399000,
zipCodes: '100xx-104xx, 11004-05, 111xx-114xx, 116xx',
},
washington: {
name: 'Washington',
state: 'District of Columbia',
description: `DescriptionWashington, DC, the U.S. capital, is a compact city on the Potomac River, bordering the states of Maryland and Virginia. It’s defined by imposing neoclassical monuments and buildings - including the iconic ones that house the federal government’s 3 branches: the Capitol, White House and Supreme Court. It's also home to iconic museums and performing-arts venues such as the Kennedy Center.`,
mayor: 'Muriel Bowser',
population: 705549,
},
seattle: {
name: 'Seattle',
state: 'Washington',
description: `DescriptionSeattle, a city on Puget Sound in the Pacific Northwest, is surrounded by water, mountains and evergreen forests, and contains thousands of acres of parkland. Washington State’s largest city, it’s home to a large tech industry, with Microsoft and Amazon headquartered in its metropolitan area. The futuristic Space Needle, a 1962 World’s Fair legacy, is its most iconic landmark.`,
mayor: 'Jenny Durkan',
population: 744955,
},
};

[@itmeurdad]

The quality and effort put into this video really stands out. I've learned more from this 24 minutes than the last few hours of self guided Serverless research.

[@CompleteCoding]

Thanks Jake, that means a lot. Hope you get to build some really cool projects with serverless

[@SadathIqbal]

Absolutely great work! Concise and touches all the key areas nicely. The way you communicate and structure things make it very easy to understand!

[@CompleteCoding]

Glad you liked it!

[@christophersantos4833]

Optional chaining will return undefined if the property doesn't exist instead of null. Here's the link to it: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining. Anyway, thank you for this great content. Keep it up!

[@CompleteCoding]

Nice spot.

[@niccodev7704]

Great tutorial, thank you! It'd be great to see more content about JS and AWS :) I'd have one question: when would you choose to go for the Serverless framework (with AWS) over AWS Amplify (and vice versa)?

[@CompleteCoding]

I've got a whole playlist of videos that use AWS and JS to build some really powerful features. kzbin.info/aero/PLmexTtcbIn_gP8bpsUsHfv-58KsKPsGEo Serverless vs Amplify - Serverless is a tool to deploy AWS features and services without having to write cloudformation. This could be APIs, Lambdas, databases, step functions. Amplify (using appSync) is a tool to allow you to quickly and easily add authentication, databases and storage to your app. All of your logic lives in the app. If you're building something where you need to add a relatively simple database table to the app - use Amplify. If you want to have lot of inter-related tables, use other AWS Services ( SES, SQS, translate, comprehend, VPCs, EC2s ) and want to build APIs to take a lot of the logic and code complexity out of your front end code then use Serverless.

[@niccodev7704]

@@CompleteCoding Wow, thank you so much for your time to answer and your thorough explanation, now it's much clearer. I'll definitely need to check your playlist, as I'd like to get started with AWS services :)

[@prerakhere]

Awesome. Just wanted to clarify one query of mine - Are AWS profiles meant to have access control over different resources? For example, say profile p1 has access to S3, p2 has access to dynamoDB, etc. Am I right?

[@CompleteCoding]

It depends on what you're using the AWS Profile for. AWS Profiles should only really be used for systems outside of AWS that need to interact with AWS. I only use AWS Profiles for deploying my CloudFormation stacks. If you've got a Lambda or an EC2 that needs to access S3 or Dynamo, you should be using IAM roles. You say what that IAM role can and can't do and then attach it to the lambda or EC2.

[@RajeshYadav-bg6dy]

I really appreciate your serverless work.

[@CompleteCoding]

Thanks. Glad you enjoy the videos

[@igoralves1]

Is it necessary in a functional paradigm? One function should handle a unique process. If you overload your repository with many files you will end up with coldstart issues.

[@CompleteCoding]

One unique process per lambda is ideal. With typescript and esbuilds, only the code required for each lambda will end up in that lambda deployment. If you start approaching the cloudformation 500 resource limit you can make 'multi-process' Lambdas but that's only a short term solution to creating multiple stacks

[@TheVitkuz]

Why did they change yml to ts extention in serverless configuration file?

[@CompleteCoding]

I think that it was just so the code and the config is all in the same style. Having type checking on the serverless file is actually really useful.

[@ricardogiovani8522]

Thanks! Could you indicate how you have configured the webpack.config.js file please

[@CompleteCoding]

if you follow this video and use "aws-nodejs-typscript" template, it now uses "ES-Builds". This is way better than webpack.

[@prerakhere]

@@CompleteCoding thanks for this heads up

[@johnwilliams7999]

How do you unit test that service,

[@CompleteCoding]

You can create a unit test for the lambda code you've written. Use jest to call the handler function with an example 'event' and then check that the response is what you expect. If you add aws services (dynamo, SES, s3) then you can mock those so your unit tests stay as unit tests

[@shahidabbas2932]

sir i want to ask a question please reply me...? i really need your help

[@CompleteCoding]

What's your question?

[@shahidabbas2932]

@@CompleteCoding aws-typescript-node template schema validation not working with local dynamodb. how to properly validate schema before saving to dynamodb (local as well as real dynamodb) the schema.ts file which we got in template (lambda function) how do we apply proper validation in this file like min max length , email pattern,required etc.

[@nuruddinshaik960]

Superb the video is in simple and more understandable. Thank you lots of love from India❤️. And wish me happy Independence day.

[@CompleteCoding]

Thank you so much 😀

[@himanshutariyal8782]

Great video, just one question, can we remove the "/dev" from our endpoints that are automatically added by the template somehow. Since I would not like all my apis to look like "/dev/user/get" and all

[@CompleteCoding]

There are two ways. Either replace the api type with a "http" Event in the lambda definition Or create a custom domain name. You can set that so you don't have the "/dev" in your url

[@ethanlloyd21]

I was having some CORS issue with this code. I can access the API using multiple browser and POstman but when I actually integrate the code on my web application it is giving me this error: has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. I set the cors: true on the serverless.ts

[@CompleteCoding]

In the response body you also need to set the headers of { statusCode: XXX, body: { ... }, headers: { => 'Access-Control-Allow-Origin': '*' } }

[@PaulliMr]

Great tutorial, and I'd like to add a quick advice to make it even better. If you're making tutorial on how to create AWS API endpoint with Serverless, don't bother explaining why Typescript is good or what is interface just stick to the topic. Anyway, good work thank you!

[@CompleteCoding]

Thanks. I already have a video on creating APIs with Serverless (and JS). This was specifically as I have been asked about using typescript. As it needs to be compiled there are some extra steps and plugins

[@djaos-8326]

is possible combinate nestjs framework with serverless typescript framework ? maybe a project with typescript as standard language

[@CompleteCoding]

That's a really cool idea. I'll look into it and add it to the video idea list

[@darshanb.c.3441]

Amazing videos in your channel, can you make a video on Testing with typescript

[@CompleteCoding]

I have a video on testing lambda and dynamo. It would be almost identical with typescript. kzbin.info/www/bejne/oV7VgJqnnqyYaZY

[@21sebas12]

Thanks, thanks thanks!!, incredible video tutorial easy to interpret and easy English. Well done!

[@CompleteCoding]

Glad it helped!

[@theacid1]

Why is it creating a serverless.ts file and not a serverless.yml file ? And could you somehow go back to a serverless.yml file?

[@CompleteCoding]

As you are creating a typescript repo, the template assumes you'd rather work with a serverless.ts file. I've not tried reverting to serverless.yml but I don't see why it shouldn't work.

[@lordpablo1985]

We use cloud formation and nested stacks with typical javascript code. If we switched to typescript would we need to pre compile to es6 javascript or is there a way to do it automatically?

[@CompleteCoding]

The way this project is set up, it compiles to es6 on deployment. If you're adding/updating to typescript with an existing stack then you'll need to compile before deploying. I add a build script of "deploy": "tsc && sls deploy" to my package.json and then just run "npm run deploy" instead of 'sls deploy'

[@dcabib]

Amazing... Thanks for this class... I really enjoy it... Congratulations

[@CompleteCoding]

Glad you enjoyed the class Daniel

[@DaveLampton]

Can you please link to your cityData in the description? Thnx.

[@CompleteCoding]

I've just added that :)

[@xq_nemesis]

I admire people who can tolerate working with two different type of monitors

[@CompleteCoding]

haha thanks. You're the first person to notice/comment on this

[@kkwilson27]

Sam, is the code for this video on Github? I can't seem to find it. I am getting an error with serverlessConfiguration in serverless.ts and I would like to compare yours to mine. Error: Property 'configValidationMode' is missing in type '{ service: { name: string; }; frameworkVersion: string; custom: { webpack: { webpackConfig: string; includeModules: boolean; }; }; plugins: string[]; provider: { name: "aws"; runtime: string; apiGateway: { ...; }; environment: { ...; }; }; functions: { ...; }; }' but required in type 'Serverless'

[@AmirulAbu1]

just add this in serverless.ts -> configValidationMode: "error",

[@kkwilson27]

@@AmirulAbu1 Thank you.

[@CompleteCoding]

It looks like @Amirul Abu sorted this one for you. Does it now work?

[@RakeshBitling]

Expecting more industry oriented videos

[@CompleteCoding]

Like what? Videos describing how I'd architect certain apps?

[@z4ckfytc777]

Thank you for this tutorial! It helped me a lot

[@CompleteCoding]

Glad it was useful

[@CVenture]

Great..Helpful video. Thanks.

[@CompleteCoding]

My pleasure

[@lauraochoa96]

This video is awesome! Thank you!!

[@CompleteCoding]

Glad you liked it!

[@jiansu]

this is so amazing. i thank you for your hard work~! i will be ur first student when ur course come out!

[@CompleteCoding]

Thanks, hearing that you're loving the content makes it worth while. I've actually got a free course here - covers building a small full-stack app skl.sh/3arTBrp

[@antonioguiotto3487]

what is your color theme?

[@CompleteCoding]

Monokai Pro. I think it was $10 but it's just a really nice theme in my opinion and well worth it

[@RajeshYadav-bg6dy]

I hope sometime in the future you will make an introductory video on AWS-Kinesis for microservices.

[@CompleteCoding]

I'll add it to the list and look into it

[@WhyteTunez]

@@CompleteCoding where / how did you get the serverless command?

[@CompleteCoding]

@@WhyteTunez npm i -g serverless That will allow you to use the serverless CLI

[@WhyteTunez]

Thank you ...

[@Godiio7]

Absolutely amazing

[@CompleteCoding]

Thanks. Glad you liked it