<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Karthik S Kumar</title>
    <description>The latest articles on DEV Community by Karthik S Kumar (@00karthik).</description>
    <link>https://dev.to/00karthik</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F429142%2Ff06d228c-74ec-40a8-a809-25e237df41f6.jpeg</url>
      <title>DEV Community: Karthik S Kumar</title>
      <link>https://dev.to/00karthik</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/00karthik"/>
    <language>en</language>
    <item>
      <title>Build your first Serverless App with AWS Lambda, API Gateway, Express, and Typescript — 2020</title>
      <dc:creator>Karthik S Kumar</dc:creator>
      <pubDate>Sat, 11 Jul 2020 09:24:13 +0000</pubDate>
      <link>https://dev.to/00karthik/build-your-first-serverless-app-with-aws-lambda-api-gateway-express-and-typescript-2020-3beo</link>
      <guid>https://dev.to/00karthik/build-your-first-serverless-app-with-aws-lambda-api-gateway-express-and-typescript-2020-3beo</guid>
      <description>&lt;p&gt;This article was originally posted on Medium. The original article is &lt;a href="https://medium.com/@karthikvillanchira/build-your-first-serverless-app-with-aws-lambda-api-gateway-express-and-typescript-2020-4841f54514eb"&gt;here&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This article will show you how to build a Serverless Express application in Typescript using AWS Lambda and API Gateway. You will find the code &lt;a href="https://github.com/00karthik/serverless-typescript/"&gt;here&lt;/a&gt;. The topics we will cover in this article are:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Project setup&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Addition of Express.js&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Deployment&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://www.serverless.com/"&gt;Serverless&lt;/a&gt; Framework is a more general-purpose tool for deploying and managing serverless applications. It simplifies the configuration and deployment of the function and its connected services. &lt;a href="https://aws.amazon.com/lambda/serverless-architectures-learn-more/"&gt;Serverless Architecture&lt;/a&gt; lets you execute a piece of code and only charges you for the resources you use, unlike static servers that charge a fixed price even if usage is low. As a developer, this means that you don’t have to think about managing servers and scaling. You just focus on code. This article will guide you through the steps to build a serverless API that runs on E&lt;a href="https://expressjs.com/"&gt;xpress.js&lt;/a&gt; using &lt;a href="https://aws.amazon.com/lambda/"&gt;AWS Lamd&lt;/a&gt;a and &lt;a href="https://aws.amazon.com/api-gateway/"&gt;AWS API Gateway&lt;/a&gt;. Typescript is used to write the code as it supports static typing which will reduce compile-time errors.&lt;/p&gt;

&lt;p&gt;Before you start you will need to have&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Basic knowledge of Typescript, Node.js, npm, Express.js.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Amazon web services (AWS) account.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This article assumes that you have Node.js and npm installed in your system.&lt;/p&gt;

&lt;h2&gt;
  
  
  Project setup
&lt;/h2&gt;

&lt;p&gt;Let’s install the &lt;a href="https://www.serverless.com/"&gt;Serverless&lt;/a&gt; framework and &lt;a href="https://www.npmjs.com/package/aws-sdk"&gt;AWS-SDK &lt;/a&gt;module globally using:&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm i -g serverless aws-sdk
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;Now create a project folder and initialize an npm to create a package.json file. Then create a new serverless service in the project folder.&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;mkdir my-serverless-project
cd my-serverless-project
serverless create --template aws-nodejs-typescript
npm install
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;The Serverless framework generates a boilerplate for the application. Out of these handler.ts and serverless.yml are significant. The filehandler.ts is like the index.js file in a traditional Node.js application. This is the file where execution starts.&lt;/p&gt;

&lt;p&gt;Now we will install &lt;a href="https://www.npmjs.com/package/serverless-offline"&gt;serverless-offline&lt;/a&gt; which is a plugin used to run the Serverless framework on the localhost. This will emulate the Lambda and API Gateway on your local machine to speed up your development cycles. Otherwise, you will have to deploy every time you test a change.&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install -D serverless-offline
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;Modify the serverless.yml file to include the plugin.&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;service:
  name: serverless*
*custom:
  webpack:
    webpackConfig: ./webpack.config.js
    includeModules: true*
*plugins:
  - serverless-webpack
  - serverless-offline
provider:
  name: aws
  runtime: nodejs12.x
  apiGateway:
    minimumCompressionSize: 1024
  environment:
    AWS_NODEJS_CONNECTION_REUSE_ENABLED: 1
functions:
  hello:
    handler: handler.hello
    events:
      - http:
          method: get
          path: /
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;Now run the following command in your project folder to start the serverless offline server.&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;serverless offline start
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;You will see the following screen and when you enter &lt;a href="http://localhost:3000/dev"&gt;http://localhost:3000/dev&lt;/a&gt; in your browser you will be able to see the response from the server. By default, serverless-offline runs at port 3000&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--sFAa-4Xu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/2900/1%2AmoBI8wXMsCoBW1xIeDOi8A.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--sFAa-4Xu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/2900/1%2AmoBI8wXMsCoBW1xIeDOi8A.png" alt="serverless in localhost:3000"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We have completed the basic setup of our serverless application. In the next section, we will add Typescript to our application.&lt;/p&gt;

&lt;h2&gt;
  
  
  Adding Express.js to our application
&lt;/h2&gt;

&lt;p&gt;First, we will install the necessary packages required to run the express application in our project. We must replace the handler.js file with handler.ts .&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm i aws-lambda serverless-http express @types/express
rm handler.js
touch handler.ts
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;Add the following code to our handler.ts file to initialize our two routes:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;A /message route.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;A fallback route that sends &lt;em&gt;**Server is running *&lt;/em&gt;*message for all routes other than /message&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;  import { APIGatewayProxyHandler } *from* 'aws-lambda';
  import serverless *from* 'serverless-http';
  import express, { Request, Response } *from* 'express';

  const app = express();

  app.get('/message', (req: Request, res: Response) =&amp;gt; {
    res.send({ message: 'This is message route' });
  });

  app.use((req: Request, res: Response) =&amp;gt; {
    res.send({ message: 'Server is running' });
  });

  export const hello: APIGatewayProxyHandler = serverless(app);
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;We will need to modify serverless.yml to make the hello function capture all the HTTP requests.&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;service: 
  name: serverless*
*custom:
  webpack:
    webpackConfig: ./webpack.config.js
    includeModules: true*
*plugins:
  - serverless-webpack
  - serverless-offline
provider:
  name: aws
  runtime: nodejs12.x
  apiGateway:
    minimumCompressionSize: 1024
  environment:
    AWS_NODEJS_CONNECTION_REUSE_ENABLED: 1
functions:
  hello:
    handler: handler.hello
    events:
      - http: ANY /
      - http: 'ANY {proxy+}'
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;Restart the server and go to &lt;a href="http://localhost:3000/dev/message"&gt;http://localhost:3000/dev/message&lt;/a&gt; to see the response. Yaay! you have successfully created a serverless lambda function!&lt;/p&gt;

&lt;h2&gt;
  
  
  Deploying your first serverless application
&lt;/h2&gt;

&lt;p&gt;Also, obtain a key and secret from your AWS account with all the necessary permissions to deploy the application. Running the following command will let you add the key and secret.&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;serverless config credentials — provider aws — key &amp;lt;your-access-key-id&amp;gt; — secret &amp;lt;your-secret-key&amp;gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;Now run the following command to deploy your application to AWS.&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;serverless deploy
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;After successful deployment, a link will be shown in the command line. This will be the API gateway link&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--AHzV932q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/2836/1%2Anp_Q2Gisp_CF9tI_E5zBOA.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--AHzV932q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/2836/1%2Anp_Q2Gisp_CF9tI_E5zBOA.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We have successfully created a lambda function and deployed it to AWS.&lt;/p&gt;

&lt;p&gt;You can find the complete code in this &lt;a href="https://github.com/00karthik/serverless-typescript/"&gt;repository&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  What’s next?
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Now you can add your routes to the application. You will need to add &lt;a href="https://www.npmjs.com/package/body-parser"&gt;body-parser&lt;/a&gt; as middleware to parse the incoming request.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Add &lt;a href="https://www.npmjs.com/package/prettier"&gt;prettier&lt;/a&gt; and &lt;a href="https://www.npmjs.com/package/eslint"&gt;es-lint&lt;/a&gt; for code formatting.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;You can set up CI/CD pipelines to automate the deployment process.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  References
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://www.serverless.com/blog/serverless-express-rest-api"&gt;https://www.serverless.com/blog/serverless-express-rest-api&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://medium.com/linkit-intecs/typescript-project-using-serverless-framework-c3bfc16c2a7c"&gt;https://medium.com/linkit-intecs/typescript-project-using-serverless-framework-c3bfc16c2a7c&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://www.freecodecamp.org/news/express-js-and-aws-lambda-a-serverless-love-story-7c77ba0eaa35/"&gt;https://www.freecodecamp.org/news/express-js-and-aws-lambda-a-serverless-love-story-7c77ba0eaa35/&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>serverless</category>
      <category>javascript</category>
      <category>aws</category>
      <category>typescript</category>
    </item>
  </channel>
</rss>
