<?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: Avik Kundu</title>
    <description>The latest articles on DEV Community by Avik Kundu (@avik6028).</description>
    <link>https://dev.to/avik6028</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%2F357147%2F4c098292-e032-47a1-b9e6-62ebc13eee59.png</url>
      <title>DEV Community: Avik Kundu</title>
      <link>https://dev.to/avik6028</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/avik6028"/>
    <language>en</language>
    <item>
      <title>Introduction to AWS Step Functions</title>
      <dc:creator>Avik Kundu</dc:creator>
      <pubDate>Tue, 26 Jul 2022 02:24:13 +0000</pubDate>
      <link>https://dev.to/aws-builders/introduction-to-aws-step-functions-28k7</link>
      <guid>https://dev.to/aws-builders/introduction-to-aws-step-functions-28k7</guid>
      <description>&lt;p&gt;AWS cloud provides various services to build serverless applications on their platform. There are compute services like AWS Lambda and AWS Fargate, while there are other integration services which binds various compute services, like AWS Step Functions, Amazon API Gateway, etc.&lt;/p&gt;

&lt;p&gt;In this article, we are going to explore &lt;strong&gt;AWS Step Functions&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;The official definition of AWS Step function is as follows:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Step Functions is a serverless orchestration service that lets you combine AWS Lambda functions and other AWS services to build business-critical applications. Through Step Functions' graphical console, you see your application’s workflow as a series of event-driven steps.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;One of the most important characteristics of Step functions is that it uses Finite State Machines (FSM) model. The state machines does a simple job of using the states and functions to perform the tasks it is assigned to complete. The use of state machines guarantees the fact of not having the issue of infinite loops, which is itself a costly operation.&lt;/p&gt;

&lt;p&gt;The two most important keywords are States and Transitions. A machines gets defined by its states and the relationships between them, known as transitions.&lt;br&gt;
Adding of more states increases the complexity of the FSM. The state machines are defined using the &lt;strong&gt;JSON-based Amazon States Language&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  When to use Step Functions
&lt;/h2&gt;

&lt;p&gt;The service improves application resiliency in a multitude of ways. For example, developers can implement checkpoints and restarts to ensure application tasks execute in order and as expected. They can use built-in try/catch capabilities to deal with errors and exceptions automatically. And they can even set their own retry handling parameters around backoff rates, max attempts, and error equals.&lt;/p&gt;

&lt;p&gt;Furthermore, AWS Step Functions integrates seamlessly with other AWS services. Developers can set it to run in parallel with other tasks, hold for external workflows, or wait for other internal jobs to finish. Users can incorporate machine learning programs into their applications with AWS SageMaker, batch computing capabilities with AWS Batch, serverless ETL through AWS Glue, and much more.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9y8ymb6l8cf49e7y6r47.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9y8ymb6l8cf49e7y6r47.png" alt="AWS Services"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Step Functions are also beneficial for long-running or delayed workflows. It allows you to have a workflow for up to a year while also implementing the waiting state.&lt;/p&gt;

&lt;h2&gt;
  
  
  Deep-Dive into Step Functions
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Types of States
&lt;/h3&gt;

&lt;p&gt;There are &lt;strong&gt;8&lt;/strong&gt; types of states:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Task state&lt;/strong&gt; – Do some work in your state machine. AWS Step Functions can invoke Lambda functions directly from a task state.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Choice state&lt;/strong&gt; – Make a choice between branches of execution&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Fail state&lt;/strong&gt; – Stops execution and marks it as failure&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Succeed state&lt;/strong&gt; – Stops execution and marks it as a success&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Pass state&lt;/strong&gt; – Simply pass its input to its output or inject some fixed data&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Wait state&lt;/strong&gt; – Provide a delay for a certain amount of time or until a specified time/date&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Parallel state&lt;/strong&gt; – Begin parallel branches of execution&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Map state&lt;/strong&gt; – Adds a for-each loop condition&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Important Features
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;AWS Step Functions allows you to combine your pre-existing Lambda functions and microservices into new compositions while coordinating them. Your workflow's tasks can be executed everywhere, on instances, containers, functions, and mobile devices, among other platforms.&lt;/li&gt;
&lt;li&gt;Step Functions maintain a strict barrier between your application's logic and implementation. You can change the order of the steps and add, move, swap, and reshuffle them without altering your business logic.&lt;/li&gt;
&lt;li&gt;Whether the operation takes seconds or months to complete, Step Functions automatically manages errors and exceptions with built-in try/catch and retry.&lt;/li&gt;
&lt;li&gt;Step Functions maintains service capacity across several Availability Zones in each region and has built-in fault tolerance, ensuring high availability for both the service and the application workflow it supports.&lt;/li&gt;
&lt;li&gt;Step Functions automatically scales the operations and underlying compute to run the steps of your application for you in response to changing workloads.&lt;/li&gt;
&lt;li&gt;AWS Step Functions has a 99.9% SLA.&lt;/li&gt;
&lt;li&gt;AWS Step Functions enables access to metadata about workflow executions so that you can easily identify related resources. This makes it easier to correlate logs for faster debugging and to measure workflow performance data.&lt;/li&gt;
&lt;li&gt;It also supports callback patterns. Callback patterns automate workflows for applications with human activities and custom integrations with third-party services.&lt;/li&gt;
&lt;li&gt;AWS Step Functions supports workflow execution events, which make it faster and easier to build and monitor event-driven, serverless workflows. Execution event notifications can be automatically delivered when a workflow starts or completes through CloudWatch Events, reaching targets like AWS Lambda, Amazon SNS, Amazon Kinesis, or AWS Step Functions for automated response to the event.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Pricing
&lt;/h3&gt;

&lt;p&gt;Every time a step of your workflow is completed, Step Functions counts a state transition. All of your state machines' combined state transitions, including retries, are counted when calculating your fee.&lt;/p&gt;

</description>
      <category>aws</category>
      <category>serverless</category>
    </item>
    <item>
      <title>My Experience at Civo Hackathon 2021</title>
      <dc:creator>Avik Kundu</dc:creator>
      <pubDate>Sun, 05 Dec 2021 00:58:18 +0000</pubDate>
      <link>https://dev.to/avik6028/my-experience-at-civo-hackathon-2021-3acb</link>
      <guid>https://dev.to/avik6028/my-experience-at-civo-hackathon-2021-3acb</guid>
      <description>&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/lhdiBAoL80s"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Learning Kubernetes has been one of my top priorities this year. I spent quite a lot of time finding good resources to learn and have hands-on experience with the technology.&lt;br&gt;
 &lt;br&gt;
&lt;strong&gt;Finally, I came across Civo Kubernetes, when one of my seniors recommended the platform to me.  Yeah, it was the one I was looking for! &lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The Civo Kubernetes Platform provided me with fully managed K3s clusters as well as high-quality learning videos about Kubernetes from the platform developers themselves. I instantly got a $250 credit in my Civo account once I signed up with my credit card.&lt;br&gt;
&lt;br&gt;&lt;/p&gt;
&lt;h1&gt;
  
  
  Introduction
&lt;/h1&gt;

&lt;p&gt;I am currently in the &lt;strong&gt;final year&lt;/strong&gt; of my Bachelor's degree in Computer Engineering, from &lt;strong&gt;KIIT University, Bhubaneswar, India&lt;/strong&gt;. &lt;/p&gt;

&lt;p&gt;In fact, this is my &lt;strong&gt;2nd victory in a nationwide hackathon&lt;/strong&gt; this year. Earlier this year, I had finished as the First Runners-up at the &lt;strong&gt;TCS Inframinds Hackathon&lt;/strong&gt;. Apart from that, I am currently a &lt;strong&gt;DevOps intern&lt;/strong&gt; at &lt;strong&gt;Highradius Technologies&lt;/strong&gt; and also an enthusiastic &lt;strong&gt;open-source contributor&lt;/strong&gt;. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--maSisNkZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oakbtnuxmn0cj92fid4p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--maSisNkZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oakbtnuxmn0cj92fid4p.png" alt="Civo hackathon" width="880" height="329"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When I got to know about the &lt;strong&gt;Civo Hackathon&lt;/strong&gt;, I planned to take part in it as I needed hands-on experience with &lt;strong&gt;Kubernetes&lt;/strong&gt;. Also, the speaker line-up before the commencing of the hackathon was interesting. I got to know about the platform as well as about monitoring and profiling from the developer advocates of Civo. &lt;/p&gt;

&lt;p&gt;The hackathon spanned over the &lt;strong&gt;2nd weekend of November 2021&lt;/strong&gt;, starting from Friday, when we had the speaker sessions till Sunday evening. The results were finally announced the very next Monday.&lt;/p&gt;
&lt;h3&gt;
  
  
  &lt;strong&gt;Much to my surprise, I finished up 2nd !!!!!!&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--WuI2VOPG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/moyrvugfj1b93ipj7na6.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--WuI2VOPG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/moyrvugfj1b93ipj7na6.gif" alt="I was dumbstruck and excited!" width="500" height="392"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h1&gt;
  
  
  My Project
&lt;/h1&gt;

&lt;p&gt;The project I built is a &lt;strong&gt;Computer-Aided Diagnostic System&lt;/strong&gt; that is used to predict whether a person has been infected with COVID-19. &lt;/p&gt;

&lt;p&gt;The prediction is possible through the integration of the COVID-19 X-Ray Classifier into a Web Application. By uploading Frontal Chest X-Rays, the model can perform classification between COVID and non-COVID X-Rays using Modified DenseNet architectures.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--n4c1EUJA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yr1bshzi4pwhhrqzjhkz.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--n4c1EUJA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yr1bshzi4pwhhrqzjhkz.jpg" alt="My Hackathon Project" width="880" height="385"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The users are given the option to save the results to the Database to receive further advice from doctors. The data is stored securely in MongoDB. Apart from that, REST API has been provided for Developers to access the Deep Learning Model and get prediction data in their applications. I have also enabled monitoring facilities for the application. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The entire project was hosted on the Civo Kubernetes Platform.&lt;/strong&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;
&lt;h1&gt;
  
  
  How I built it
&lt;/h1&gt;

&lt;p&gt;The project kickstarted with the Development of the Web Application. The UI was finalized and then the application was developed. Several open-source styles, libraries and toolkits were used during the development of the Frontend with HTML, CSS and JavaScript.&lt;/p&gt;

&lt;p&gt;After completion, the backend of the application was developed with &lt;strong&gt;Python &amp;amp; Flask framework&lt;/strong&gt;. The routes were created and mapped to the Frontend. The Deep Learning Model was integrated with the backend REST APIs. Various libraries such as Numpy, Pillow and Tensorflow was used to manage the model. Finally, MongoDB was integrated with the backend to save the Form data.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--sOvLq1z0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1p09w433nczk5jti2e3y.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--sOvLq1z0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1p09w433nczk5jti2e3y.jpg" alt="Web Application" width="787" height="573"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;This completed the Web Application Development.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The next stage involved deploying the application on Civo K3s Cluster by developing an automated DevOps CI/CD Pipeline. First, the entire application code was pushed to a GitHub repository. Through this step, the code version control is ensured and any change in the code would automatically trigger the entire pipeline.&lt;/p&gt;

&lt;p&gt;To deploy applications on K8s, the application needed to be containerized. The building of the Docker container should automatically take place once any code gets changed. After building the container, it needs to be pushed to a Docker Repository, here Dockerhub. Also, the old Docker Image Tag mentioned in the code would need to be replaced by the new Docker Image Tag. For automating all these, a Continuous Integration Pipeline was created with the help of Github Actions as the CI tool.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Q041PHBk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3l77u6u9iu4t8za0apl.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Q041PHBk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3l77u6u9iu4t8za0apl.jpg" alt="Github Actions" width="806" height="304"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A workflow file was written to sequence the jobs that needed to be performed, once the code get changed in the repository. The jobs involved building and pushing the Docker container to Dockerhub. &lt;br&gt;
After pushing, the new container tag replaced the older one mentioned in the customization file automatically, with the help of Kustomize.io. The Deployment, Service and Ingress YAML files were pushed to the repository as K8s needed these files during deployment.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;Github Actions Workflow&lt;/code&gt; file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;CIVO HACKATHON WORKFLOW&lt;/span&gt;

&lt;span class="na"&gt;on&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; 
  &lt;span class="na"&gt;push&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;branches&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="pi"&gt;[&lt;/span&gt; &lt;span class="nv"&gt;master&lt;/span&gt; &lt;span class="pi"&gt;]&lt;/span&gt;

&lt;span class="na"&gt;jobs&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;

  &lt;span class="na"&gt;build&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;runs-on&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;ubuntu-latest&lt;/span&gt;    
    &lt;span class="na"&gt;steps&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;      
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;uses&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;actions/checkout@v2&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Build and push Docker image&lt;/span&gt;
        &lt;span class="na"&gt;uses&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;docker/build-push-action@v1.1.0&lt;/span&gt;
        &lt;span class="na"&gt;with&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
          &lt;span class="na"&gt;username&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;${{ secrets.DOCKER_USER }}&lt;/span&gt;
          &lt;span class="na"&gt;password&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;${{ secrets.DOCKER_PASSWORD }}&lt;/span&gt;
          &lt;span class="na"&gt;repository&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;${{ secrets.DOCKER_USER }}/civo-hackathon&lt;/span&gt;
          &lt;span class="na"&gt;tags&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;${{ github.sha }}, latest&lt;/span&gt;


  &lt;span class="na"&gt;deploy&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Deploy&lt;/span&gt;
    &lt;span class="na"&gt;runs-on&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;ubuntu-latest&lt;/span&gt;
    &lt;span class="na"&gt;needs&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;build&lt;/span&gt;

    &lt;span class="na"&gt;steps&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Check out code&lt;/span&gt;
      &lt;span class="na"&gt;uses&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;actions/checkout@v2&lt;/span&gt;

    &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Setup Kustomize&lt;/span&gt;
      &lt;span class="na"&gt;uses&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;imranismail/setup-kustomize@v1&lt;/span&gt;
      &lt;span class="na"&gt;with&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
        &lt;span class="na"&gt;kustomize-version&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;3.6.1"&lt;/span&gt;

    &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Update Kubernetes resources&lt;/span&gt;
      &lt;span class="na"&gt;env&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
        &lt;span class="na"&gt;DOCKER_USERNAME&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;${{ secrets.DOCKER_USER }}&lt;/span&gt;
      &lt;span class="na"&gt;run&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="pi"&gt;|&lt;/span&gt;
       &lt;span class="s"&gt;cd kustomize/base&lt;/span&gt;
       &lt;span class="s"&gt;kustomize edit set image civo-hackathon=$DOCKER_USERNAME/civo-hackathon:$GITHUB_SHA&lt;/span&gt;
       &lt;span class="s"&gt;cat kustomization.yaml&lt;/span&gt;

    &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Commit files&lt;/span&gt;
      &lt;span class="na"&gt;run&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="pi"&gt;|&lt;/span&gt;
        &lt;span class="s"&gt;git config --local user.email "action@github.com"&lt;/span&gt;
        &lt;span class="s"&gt;git config --local user.name "GitHub Action"&lt;/span&gt;
        &lt;span class="s"&gt;git commit -am "Bump docker tag"&lt;/span&gt;
    &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Push changes&lt;/span&gt;
      &lt;span class="na"&gt;uses&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;ad-m/github-push-action@master&lt;/span&gt;
      &lt;span class="na"&gt;with&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
        &lt;span class="na"&gt;github_token&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;${{ secrets.GITHUB_TOKEN }}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;&lt;strong&gt;This completed the Continuous Integration process.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The final stage was to deploy the Docker Image pushed in DockerHub, into a CIVO k3s Cluster. For this, a K3s cluster was created on Civo. Due to CPU intensive nature of the application, the Largest Node configuration was selected. Then through the Civo CLI, the KubeConfig file was connected with the local KubeCTL tool.&lt;/p&gt;

&lt;p&gt;Through KubeCTL, a namespace was created and ArgoCD was installed in it. Inside ArgoCD, the configuration was provided to continuously track the GitHub Repository for changes in the Kustomization file. &lt;/p&gt;

&lt;p&gt;Since previously through CI, we had managed to update the Kustomization file after a new code change took place, this update in the Kustomization file triggered the ArgoCD to re-deploy the application based on the newer Docker Image Tag provided. Thus after an initial manual Sync, ArgoCD managed to complete the Continuous Deployment process.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--2hnO5iwv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6e0w7dkz50mrme9uuud0.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2hnO5iwv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6e0w7dkz50mrme9uuud0.jpg" alt="Argo CD" width="806" height="387"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The CI/CD Pipeline was successfully created which helped to automatically deploy code changes to production.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;After the application was properly working, I proceeded with installing Prometheus and Grafana in a separate namespace in the cluster to fetch and visualize the metrics. For that, I edited the Flask application to make it generate metrics to be fed to Prometheus. &lt;/p&gt;

&lt;p&gt;Then I developed a Service Monitor for exposing the metrics endpoint of the application which in turn would be automatically added to the Prometheus Target group. Now, I was able to fetch metrics into Prometheus from the Web application. After that, I set up the Grafana Dashboard to visualize the metrics.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--HYB00qMA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1c2cohx7t4fil7uehqz7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--HYB00qMA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1c2cohx7t4fil7uehqz7.png" alt="Grafana Dashboard" width="880" height="440"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;This finally concluded the project.&lt;/strong&gt;&lt;br&gt;
&lt;br&gt;&lt;/p&gt;
&lt;h1&gt;
  
  
  My Experience
&lt;/h1&gt;

&lt;p&gt;Overall, I had a great experience learning and executing new things within a short span of time. The process of deployment could not be made smoother without the Civo Platform. The fact that we can launch a cluster within a few minutes, along with having a marketplace from where we can pick services we want to preinstall in the cluster, really simplified the process for newbie Kubernetes developers like me. &lt;/p&gt;

&lt;p&gt;Apart from that, the presence of the Kubernetes academy which contains beginner-friendly videos about all the different features of K8s, integrated into the platform, helped me to quickly navigate and get my doubts cleared before applying stuff on my cluster.&lt;/p&gt;

&lt;p&gt;And of course, we had the option of directly contacting the Civo team via Slack to get out queries resolved. Special thanks to &lt;strong&gt;Saiyam Pathak&lt;/strong&gt;, for his Monitoring video, which really helped me set up the monitoring stack easily.&lt;br&gt;
&lt;br&gt;&lt;/p&gt;
&lt;h1&gt;
  
  
  What's next for the project
&lt;/h1&gt;

&lt;p&gt;Although I tried my best to incorporate all the domains of DevOps into my application, still there are some places that need attention. &lt;/p&gt;

&lt;p&gt;First and foremost, I tried to incorporate the GitOps principle as much as possible, which included pushing the application code, Kubernetes Manifests as well as Terraform scripts to the Git. But still, there were some settings that I had to manually set inside the cluster like setting up the ArgoCD. Since ArgoCD supports GitOps, I would be declaring the settings from Git itself.&lt;/p&gt;

&lt;p&gt;Apart from that, I would be incorporating some Logging and Profiling tools in the cluster, that would give a better picture of the application deployment.&lt;/p&gt;

&lt;p&gt;Last but not the least, the model which has been deployed can currently perform classification only. But recently, in some researches, it has been proved that through Instance Segmentation on the X-Rays, we can actually measure the severity of the spread of the virus by precisely identifying the locations of the GGOs. In the future, I want to integrate such a model with the application, so that users can also measure the severity of the virus instantly.&lt;/p&gt;



&lt;p&gt;You can visit the repository from below:&lt;/p&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--566lAguM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/Lucifergene"&gt;
        Lucifergene
      &lt;/a&gt; / &lt;a href="https://github.com/Lucifergene/civo-hackathon"&gt;
        civo-hackathon
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      COVID-19 Prediction Powered by AI
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;h1&gt;
COVID-19 PROGNOSIS&lt;/h1&gt;
&lt;h3&gt;
COVID-19 Prediction Powered by AI&lt;/h3&gt;
&lt;p&gt;&lt;a href="https://github.com/Lucifergene/civo/actions/workflows/main.yml"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--c5dVJE7N--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/Lucifergene/civo/actions/workflows/main.yml/badge.svg" alt="CIVO HACKATHON WORKFLOW"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Website&lt;/strong&gt; :  &lt;a href="https://covid-predictioned.herokuapp.com/" rel="nofollow"&gt;Heroku Deployment&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;DockerHub&lt;/strong&gt; : &lt;a href="https://hub.docker.com/repository/docker/avik6028/civo-hackathon" rel="nofollow"&gt;avik6028/civo-hackathon:latest&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
Abstract&lt;/h2&gt;
&lt;p&gt;The project is a &lt;strong&gt;Computer-Aided Diagnostic System&lt;/strong&gt; which is used to predict whether a person has been infected with &lt;strong&gt;COVID-19&lt;/strong&gt;. The prediction is possible through the integration of the COVID-19 X-Ray Classifier into a Web Application. By uploading Frontal Chest X-Rays, the model can perform &lt;strong&gt;classification&lt;/strong&gt; between COVID and non-COVID X-Rays using Modified DenseNet architectures.&lt;/p&gt;
&lt;p&gt;The Deep Learning Model used, is open-sourced under MIT License and can be found &lt;a href="https://github.com/armiro/COVID-CXNet"&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;This project involves an Web Application with an automated pipeline for Continuous Integration and Deployment on CIVO K3s Cluster. K3s is a highly available, certified Kubernetes distribution designed for production workloads in unattended, resource-constrained and remote locations.&lt;/p&gt;
&lt;h2&gt;
Hackathon Theme&lt;/h2&gt;
&lt;p&gt;Machine Learning&lt;/p&gt;
&lt;h2&gt;
Development Tools Used&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Python-Flask&lt;/li&gt;
&lt;li&gt;Docker/ DockerHub&lt;/li&gt;
&lt;li&gt;Kubernetes/ K3s&lt;/li&gt;
&lt;li&gt;Kustomize&lt;/li&gt;
&lt;li&gt;GitHub Action &lt;strong&gt;CI&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Argo &lt;strong&gt;CD&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;MongoDB&lt;/li&gt;
&lt;li&gt;CIVO&lt;/li&gt;
&lt;li&gt;Postman&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
Libraries Used&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Tensorflow&lt;/li&gt;
&lt;li&gt;PyMongo&lt;/li&gt;
&lt;li&gt;Numpy&lt;/li&gt;
&lt;li&gt;…&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/Lucifergene/civo-hackathon"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;



&lt;h4&gt;
  
  
  Demo : &lt;a href="https://covid-predictioned.herokuapp.com/"&gt;https://covid-predictioned.herokuapp.com/&lt;/a&gt;
&lt;/h4&gt;

&lt;h4&gt;
  
  
  DevPost : &lt;a href="https://devpost.com/software/covid-19-prognosis"&gt;https://devpost.com/software/covid-19-prognosis&lt;/a&gt;
&lt;/h4&gt;

&lt;h4&gt;
  
  
  Civo - &lt;a href="https://www.civo.com/"&gt;https://www.civo.com/&lt;/a&gt;
&lt;/h4&gt;




&lt;p&gt;You can reach out on my &lt;a href="https://twitter.com/avik6028"&gt;Twitter&lt;/a&gt;, &lt;a href="https://instagram.com/avik6028"&gt;Instagram&lt;/a&gt;, or &lt;a href="https://linkedin.com/in/avik-kundu-0b837715b"&gt;LinkedIn&lt;/a&gt; if you need more help. I would be more than happy.&lt;/p&gt;

&lt;p&gt;If you have come up to this, do drop an ❤️ if you liked this article.&lt;/p&gt;




</description>
      <category>machinelearning</category>
      <category>devops</category>
      <category>kubernetes</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Deploying React Application on Web using AWS Amplify</title>
      <dc:creator>Avik Kundu</dc:creator>
      <pubDate>Tue, 09 Nov 2021 21:45:44 +0000</pubDate>
      <link>https://dev.to/aws-builders/deploying-react-application-on-web-using-aws-amplify-3h0o</link>
      <guid>https://dev.to/aws-builders/deploying-react-application-on-web-using-aws-amplify-3h0o</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7oygypz2hzx6trbjizsx.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7oygypz2hzx6trbjizsx.jpeg" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Today, the majority of businesses have switched to cloud computing and are willing to take a chance. Amazon Web Options (AWS) cloud platform is often regarded as the best among the several cloud adoption services currently offered. Over 90 services and products that are intended to assist developers in building quick, dependable, serverless, and secure web and mobile applications are now part of Amazon's constantly expanding portfolio.&lt;/p&gt;

&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;AWS Amplify is a full suite of tools and services created to make it simple for developers to build and release apps. It was introduced in 2017. Additionally, it might have ready-to-use components, code libraries, and a built-in command-line interface (CLI). The ability to swiftly and securely integrate a variety of tasks, from API to AI, is this tool's most important asset.&lt;/p&gt;

&lt;p&gt;The user experience is another factor in the introduction of AWS Amplify. User experience is the most crucial factor that must be taken into account while creating any programme. The user experience across many platforms, including online and mobile, was intended to be unified through AWS Amplify.&lt;/p&gt;

&lt;p&gt;Amplify effortlessly scalable with your business from thousands of users to tens of millions of users and covers the entire mobile application development workflow from version control and code testing to production deployment.&lt;/p&gt;

&lt;p&gt;The open source Amplify libraries and CLI, which are a component of the Amplify framework, provide a pluggable interface that you may personalise and develop your own plugins for.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1659045376887%2F4xLJi4AfZ.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1659045376887%2F4xLJi4AfZ.png" alt="image.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Benefits
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Don't reinvent the wheel; instead, concentrate on your business. Why create your own authentication system when there are already ones out there that can handle MFA, social providers, and all business features?&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Use Amplify to prototype cool ideas and discard features one at a time if necessary. Why not take advantage of the high-quality proof of concept work Amplify makes possible? As an illustration, you could construct your API using produced AppSync resolvers and then gradually replace them with custom resolvers as needed (similarly to Create React App).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Solid DevOps requires good multi-environment design. On-the-fly bootstrapping of new environments is possible. Additionally, the amplification environments can use the same git procedure.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Getting Started
&lt;/h2&gt;

&lt;p&gt;In this article, you will be seeing how we can easily deploy any web application on AWS Amplify. For example, here we are going to deploy a React Application. The source code can be found on the following &lt;a href="https://github.com/aditya-sridhar/simple-reactjs-app" rel="noopener noreferrer"&gt;Github&lt;/a&gt; link.&lt;/p&gt;

&lt;h3&gt;
  
  
  Pre-requisites
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;an AWS account (of course 🤪)&lt;/li&gt;
&lt;li&gt;Node.JS installed in your system&lt;/li&gt;
&lt;li&gt;a Github Account and Git CLI installed in your system&lt;/li&gt;
&lt;li&gt;Code Editor of your choice (VSCode preferred)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Cloning and Testing the Application Locally
&lt;/h3&gt;

&lt;p&gt;First, we are going to clone the repository and run the application locally in our system. Create a directory in your system and open it with VSCode. You can use the in-app command terminal to execute the code snippets.&lt;/p&gt;

&lt;p&gt;To start, clone the repository with the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git clone https://github.com/aditya-sridhar/simple-reactjs-app

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Once the repository is cloned, you will see a new directory inside the folder. Navigate inside the directory and type the following commands:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will install all the dependencies required to run the application, in your system.&lt;/p&gt;

&lt;p&gt;Once completed, you can run the application with the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm start

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The web browser will pop up and you will be seeing the following page:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1659047112637%2FBp4mvS294.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1659047112637%2FBp4mvS294.png" alt="image.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Thus, we have successfully cloned and tested the application in our local system.&lt;/p&gt;

&lt;h3&gt;
  
  
  Pushing the application code to your Github Account
&lt;/h3&gt;

&lt;p&gt;Now, we have to upload the code to your Github account, so that you can use the code with AWS Amplify. For creating a repository, we are going to use the Github CLI.&lt;/p&gt;

&lt;p&gt;First, delete the &lt;code&gt;.git&lt;/code&gt; folder present in the root directory.&lt;/p&gt;

&lt;p&gt;Then, initialize the directory with the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git init

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After that, lets create a repository with the Github CLI. Type the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;gh repo create aws-react-hosting

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will create a repository in your Github Account. Finally. we will be pushing the codes in this repository.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git add .
git commit -m "First Commit"
git remote add origin &amp;lt;link-to-your-github-repo&amp;gt;
git push -u origin main

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Deploying on AWS Amplify
&lt;/h3&gt;

&lt;p&gt;Now let's move on to deploy the application to AWS Amplify.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Open the AWS HomePage. &lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1659047019643%2FY2-hQtuIW.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1659047019643%2FY2-hQtuIW.png" alt="Hong Ly - How to Deploy React App to AWS Amplify for FREE [gTxEZrsDk3w - 1280x720 - 5m03s].png"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Login and visit the Console. &lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1659047341284%2FN0IT_1s8h.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1659047341284%2FN0IT_1s8h.png" alt="Hong Ly - How to Deploy React App to AWS Amplify for FREE [gTxEZrsDk3w - 1280x720 - 5m08s].png"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Select AWS Amplify from the List. &lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1659047383761%2F1bdZuzjL-.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1659047383761%2F1bdZuzjL-.png" alt="Hong Ly - How to Deploy React App to AWS Amplify for FREE [gTxEZrsDk3w - 1280x720 - 5m28s].png"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;You will reach to the following page: &lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1659047428687%2F3b5tS7Sls.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1659047428687%2F3b5tS7Sls.png" alt="Hong Ly - How to Deploy React App to AWS Amplify for FREE [gTxEZrsDk3w - 1280x720 - 5m38s].png"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Select GitHub from the Options available. &lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1659047484225%2FsnF_-VR0p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1659047484225%2FsnF_-VR0p.png" alt="Hong Ly - How to Deploy React App to AWS Amplify for FREE [gTxEZrsDk3w - 1280x720 - 5m58s].png"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Authorize the connection and select the repository you had created earlier. &lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1659048194516%2F3JANkQft1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1659048194516%2F3JANkQft1.png" alt="Hong Ly - How to Deploy React App to AWS Amplify for FREE [gTxEZrsDk3w - 1280x720 - 6m28s].png"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Click Next and Save and Deploy. &lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1659048262433%2FegDFtdSiG.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1659048262433%2FegDFtdSiG.png" alt="Hong Ly - How to Deploy React App to AWS Amplify for FREE [gTxEZrsDk3w - 1280x720 - 6m48s].png"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Finally, you will come to the following page: &lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1659048330864%2Flq7tFpHRp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1659048330864%2Flq7tFpHRp.png" alt="Hong Ly - How to Deploy React App to AWS Amplify for FREE [gTxEZrsDk3w - 1280x720 - 7m08s].png"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Once all the stages are completed, click on the link to see the live website. &lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1659047112637%2FBp4mvS294.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1659047112637%2FBp4mvS294.png" alt="image.png"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;Thus, we have successfully deployed a React application on AWS Amplify!!!&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;For web and mobile developers, Amazon Web Services Amplify can be quite helpful. For full-stack apps, all built-in authentication, alerts, and APIs may be implemented with a minimum of effort. Giving your clients the best value instead of wasting time managing the application infrastructure allows you to concentrate on your top priorities.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>CloudFlare URL Shortener</title>
      <dc:creator>Avik Kundu</dc:creator>
      <pubDate>Sat, 28 Aug 2021 16:42:01 +0000</pubDate>
      <link>https://dev.to/avik6028/cloudflare-url-shortener-53mh</link>
      <guid>https://dev.to/avik6028/cloudflare-url-shortener-53mh</guid>
      <description>&lt;h4&gt; CloudFlare Worker Script to setup URL Shortener Service &lt;/h4&gt;

&lt;p&gt;&lt;small&gt;&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg8ghs9czl6j769vjan29.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg8ghs9czl6j769vjan29.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;You can optionally add your own aliases. If not, an random string would be assigned.&lt;/em&gt;&lt;br&gt;
&lt;/small&gt;&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;





&lt;p&gt;&lt;strong&gt;You need to paste this script in the &lt;code&gt;Index.JS&lt;/code&gt; file of your CloudFlare Worker&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The Service : &lt;a href="https://short-linker.lucifergene.workers.dev/" rel="noopener noreferrer"&gt;https://short-linker.lucifergene.workers.dev/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can visit the repository from below:&lt;/p&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/Lucifergene" rel="noopener noreferrer"&gt;
        Lucifergene
      &lt;/a&gt; / &lt;a href="https://github.com/Lucifergene/Cloudflare-URL-Shortener" rel="noopener noreferrer"&gt;
        Cloudflare-URL-Shortener
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;👷 Cloudflare URL Shortener&lt;/h1&gt;

&lt;/div&gt;
&lt;p&gt;&lt;code&gt;index.js&lt;/code&gt; is the content of the Workers script.&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h4 class="heading-element"&gt;Wrangler&lt;/h4&gt;

&lt;/div&gt;
&lt;p&gt;To generate using &lt;a href="https://github.com/cloudflare/wrangler" rel="noopener noreferrer"&gt;wrangler&lt;/a&gt;&lt;/p&gt;
&lt;div class="snippet-clipboard-content notranslate position-relative overflow-auto"&gt;&lt;pre class="notranslate"&gt;&lt;code&gt;wrangler generate projectname https://github.com/Lucifergene/Cloudflare-URL-Shortener
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Further documentation for Wrangler can be found &lt;a href="https://developers.cloudflare.com/workers/tooling/wrangler" rel="nofollow noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;/div&gt;



&lt;/div&gt;
&lt;br&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/Lucifergene/Cloudflare-URL-Shortener" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;br&gt;





&lt;p&gt;You can reach out on my &lt;a href="https://twitter.com/avik6028" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt;, &lt;a href="https://instagram.com/avik6028" rel="noopener noreferrer"&gt;Instagram&lt;/a&gt;, or &lt;a href="https://linkedin.com/in/avik-kundu-0b837715b" rel="noopener noreferrer"&gt;LinkedIn&lt;/a&gt; if you need more help. I would be more than happy.&lt;/p&gt;

&lt;p&gt;If you have come up to this, do drop an ❤️ if you liked this article.&lt;/p&gt;

</description>
      <category>serverless</category>
      <category>tutorial</category>
      <category>javascript</category>
      <category>cloudflare</category>
    </item>
    <item>
      <title>Building Serverless URL Shortener Service on AWS</title>
      <dc:creator>Avik Kundu</dc:creator>
      <pubDate>Mon, 23 Aug 2021 16:21:58 +0000</pubDate>
      <link>https://dev.to/aws-builders/building-serverless-url-shortener-service-on-aws-1895</link>
      <guid>https://dev.to/aws-builders/building-serverless-url-shortener-service-on-aws-1895</guid>
      <description>&lt;h4&gt; Walk-through of a serverless implementation of an URL Shortener Service without AWS Lambda Functions&lt;/h4&gt;




&lt;h2&gt;
  
  
  The AWS Serverless Ecosystem
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;Serverless is a way to describe the services, practices, and strategies that enable you to build more agile applications so you can innovate and respond to change faster. With serverless computing, infrastructure management tasks like capacity provisioning and patching are handled by AWS, so you can focus on only writing code that serves your customers.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Serverless Computing = FaaS [Functions as a Service] + BaaS [Backend as a Service]&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Serverless Services of AWS:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Compute&lt;/strong&gt;: AWS Lambda, AWS Fargate&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Storage&lt;/strong&gt;: Amazon DynamoDB, Amazon S3, etc.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Application Integration&lt;/strong&gt;: Amazon API Gateway, etc.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;In this walkthrough, we are going to develop an URL Shortener Service using various services of the AWS Serverless Ecosystem. We are going to focus mainly on the backend of the application.&lt;/p&gt;

&lt;p&gt;To implement our project in a simplified way, we will use only the 2 most important services: the &lt;strong&gt;API Gateway&lt;/strong&gt; and &lt;strong&gt;DynamoDB&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F2000%2F0%2AmdA4N2pJd9rpJ2ve.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F2000%2F0%2AmdA4N2pJd9rpJ2ve.jpeg" alt="Architecture Diagram"&gt;&lt;/a&gt;&lt;em&gt;Architecture Diagram&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  AWS Lambda
&lt;/h3&gt;

&lt;p&gt;AWS Lambda is a serverless compute service that lets you run code without provisioning or managing servers, creating workload-aware cluster scaling logic, maintaining event integrations, or managing runtimes. With Lambda, you can run code for virtually any type of application or backend service ΓÇö all with zero administration.&lt;/p&gt;

&lt;p&gt;In this application, we are not going to use AWS Lambda, since our application runs on simpler logic ΓÇö i.e. to store short-URLs into the Database and re-direct to the long-URLs once we call the short-URL.&lt;/p&gt;

&lt;h3&gt;
  
  
  Amazon API Gateway
&lt;/h3&gt;

&lt;p&gt;Amazon API Gateway is a fully managed service that makes it easy for developers to create, publish, maintain, monitor, and secure APIs at any scale. APIs act as the ΓÇ£front doorΓÇ¥ for applications to access data, business logic, or functionality from your backend services.&lt;/p&gt;

&lt;p&gt;In our application, we are going to utilize the functionality of the API Gateway through which we can perform ETL operations during the transit of data between the API Gateway and DynamoDB.&lt;/p&gt;

&lt;h3&gt;
  
  
  Amazon DynamoDB
&lt;/h3&gt;

&lt;p&gt;Amazon DynamoDB is a key-value and document database that delivers single-digit millisecond performance at any scale. ItΓÇÖs a fully managed, multi-region, multi-active, durable database with built-in security, backup and restores, and in-memory caching for internet-scale applications.&lt;/p&gt;

&lt;p&gt;DynamoDB can handle more than 10 trillion requests per day and can support peaks of more than 20 million requests per second.&lt;/p&gt;




&lt;h2&gt;
  
  
  Getting Started
&lt;/h2&gt;

&lt;p&gt;To follow this project, you only need to have an AWS account. The entire application would be developed within the AWS Web Console.&lt;/p&gt;

&lt;p&gt;Let's understand the workflow of the application. We are currently focussing on 2 main features prevalent to all URL-Shorteners.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Storing the Short-URL, Long-URL and owner inside DynamoDB
&lt;/h3&gt;

&lt;p&gt;In the backend, once a user sends a POST request to the Route, with all the required parameters, the API Gateway receives the data, transforms it and pushes it into the DynamoDB.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Redirecting to the Long-URL once the short-URL is hit
&lt;/h3&gt;

&lt;p&gt;Once a user mentions the short-URL in the HTTP header, the API gateway receives the data, processes it and searches it inside DynamoDB. Once the corresponding Long URL is found, the API Gateway redirects to the Long URL.&lt;/p&gt;




&lt;h2&gt;
  
  
  Setting Up DynamoDB Database
&lt;/h2&gt;

&lt;p&gt;First of all, we need to configure our Database. For that, we need to create a Table.&lt;/p&gt;

&lt;p&gt;The table would be consisting of 3 Columns: longURL , &lt;strong&gt;shortId&lt;/strong&gt; , owner . We would be using the shortId attribute as the &lt;strong&gt;Primary key&lt;/strong&gt; of the table.&lt;/p&gt;

&lt;p&gt;In the configuration, please use the exact names mentioned.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Table Name:&lt;/strong&gt; URL-Shortener&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Primary Key:&lt;/strong&gt; shortId&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Table settings:&lt;/strong&gt; Use Default Settings&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Once you create the Table, you would land on the following page mentioning all the Table Details:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F2770%2F1%2AMM4b0kHgyxTl9c41IdMu3g.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F2770%2F1%2AMM4b0kHgyxTl9c41IdMu3g.png"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Setting up the API Gateway
&lt;/h2&gt;

&lt;p&gt;This is the most important service in our architecture. Through this service, we are going to perform multiple operations.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Create API Endpoints for &lt;strong&gt;GET&lt;/strong&gt; and &lt;strong&gt;POST&lt;/strong&gt; requests.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Transform request parameters received from the API into DynamoDB understandable format.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Convert the response received from the DynamoDB into a format understandable by browsers for re-direction.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;We need to create an API of the type Rest API from the API Gateway console.&lt;/p&gt;

&lt;p&gt;After selecting the &lt;strong&gt;REST-API Gateway type&lt;/strong&gt;, we need to select the following configurations.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Protocol&lt;/strong&gt;: REST&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Create a new API:&lt;/strong&gt; New API&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;API name:&lt;/strong&gt; URLShortener&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;This would create a new API.&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F3786%2F1%2AXJ-fOjexTTBqqSc1LRqUtg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F3786%2F1%2AXJ-fOjexTTBqqSc1LRqUtg.png" alt="API Gateway Console"&gt;&lt;/a&gt;&lt;em&gt;API Gateway Console&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Now, we need to create an New Resource under the / route. The name of the resource is set as: url-shortener .&lt;/p&gt;

&lt;p&gt;Under this resource, we need to create multiple methods for **GET **and **POST **requests.&lt;/p&gt;




&lt;h2&gt;
  
  
  Setting Up POST Request
&lt;/h2&gt;

&lt;p&gt;Under the /url-shortener resource, we need to create a method named ΓÇ£POSTΓÇ¥. In this method, we are going to modify our POST request.&lt;/p&gt;

&lt;p&gt;Once the POST Method is selected, we have to use the following information during its setup:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Integration type:&lt;/strong&gt; AWS Service&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;AWS Region:&lt;/strong&gt; ap-south-1 [region where the DynamoDB Instance would be running]&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;AWS Service:&lt;/strong&gt; DynamoDB&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;HTTP method:&lt;/strong&gt; POST&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Action:&lt;/strong&gt; UpdateItem&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Execution role:&lt;/strong&gt; [ IAM Role in which DynamoDB write permissions are given ]&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Once the setup is completed, we land on the following page:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F3736%2F1%2AtWSNBqlziVYtfCk8nl7--g.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F3736%2F1%2AtWSNBqlziVYtfCk8nl7--g.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, we need to transform the request parameters received from the client into something that would be understood by DynamoDB.&lt;/p&gt;

&lt;p&gt;For this, we are going to utilize the Integration Request feature of the API Gateway. Through this feature, we are going to add a &lt;strong&gt;Mapping Template&lt;/strong&gt; based on which the transformation would take place.&lt;/p&gt;

&lt;p&gt;On clicking the &lt;strong&gt;Integration Request&lt;/strong&gt; from the above page, we would be landing on the following page:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F2496%2F1%2AVHxrOJ79sdB0fV1BnjwQXA.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F2496%2F1%2AVHxrOJ79sdB0fV1BnjwQXA.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Under the &lt;strong&gt;Mapping Templates section&lt;/strong&gt;, we need to add the following code:&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;Now, we have set up the process through which data would be saved into the DynamoDB. But now, we have to also format the Response that DynamoDB would be sending, to a format understandable by the Client.&lt;/p&gt;

&lt;p&gt;For this, we need to set up another &lt;strong&gt;Mapping Template&lt;/strong&gt; in the Integration Response section.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F2640%2F1%2AhLODslObT3R46hzLhyMIdw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F2640%2F1%2AhLODslObT3R46hzLhyMIdw.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Under the &lt;strong&gt;Mapping Templates section&lt;/strong&gt;, we need to add the following code:&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;Once this is set up, the response of the DynamoDB would be converted in a form understandable by the client.&lt;/p&gt;

&lt;p&gt;Thus, we have set up our POST request, which would save the request parameters in the DynamoDB and would send the response back to the client. To test, we need to click on the **TEST **option from the above console.&lt;/p&gt;

&lt;p&gt;In the Request Body, we need to type the following:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "longURL": "[https://www.google.co.in](https://www.google.co.in)",
  "owner": "Avik",
  "shortURL": "Google"
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;On submitting the above JSON, we must receive a 200 Status code and a similar response body as the following. Thus we have successfully saved the contents to the DynamoDB.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F3840%2F1%2AZbiyxi-mWQnaBgUynOupLg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F3840%2F1%2AZbiyxi-mWQnaBgUynOupLg.png"&gt;&lt;/a&gt;&lt;/p&gt;


&lt;h2&gt;
  
  
  Setting Up GET Request
&lt;/h2&gt;

&lt;p&gt;The GET request is somewhat different from the POST request. Here, the user would be appending the short URL to the API endpoint. This shortURL would be sent to the DynamoDB by the API Gateway to perform the search operation. Once the associated long URL is found, the API Gateway automatically re-directs to the long URL.&lt;/p&gt;

&lt;p&gt;Under the /url-shortener resource, &lt;strong&gt;we create another resource named as {shortURL}&lt;/strong&gt;, which would be having a dynamic resource path, as it is the place where the short URLs would be appended.&lt;/p&gt;

&lt;p&gt;Inside the newly created sub-resource, we create the GET request with the following settings:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Integration type:&lt;/strong&gt; AWS Service&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;AWS Region:&lt;/strong&gt; ap-south-1 [region where the DynamoDB Instance would be running]&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;AWS Service:&lt;/strong&gt; DynamoDB&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;HTTP method:&lt;/strong&gt; POST&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Action:&lt;/strong&gt; GetItem&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Execution role:&lt;/strong&gt; [ IAM Role in which DynamoDB write permissions are given ]&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Once the setup is completed, we land on the following page:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F3732%2F1%2A5i0yhSFXoGSWayNh-u_41w.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F3732%2F1%2A5i0yhSFXoGSWayNh-u_41w.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, we have to perform 3 transformations while the data would be transferred back and forth between the API Gateway and DynamoDB.&lt;/p&gt;
&lt;h3&gt;
  
  
  A. Integration Request
&lt;/h3&gt;

&lt;p&gt;First, we need to transform the request parameters received from the client into something that would be understood by DynamoDB. For this, we are going to utilize the &lt;strong&gt;Integration Request **feature of the API Gateway. Through this feature, we are going to add a **Mapping Template&lt;/strong&gt; based on which the transformation would take place.&lt;/p&gt;

&lt;p&gt;On clicking the &lt;strong&gt;Integration Request&lt;/strong&gt; from the above page, we would be landing on the following page:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F2588%2F1%2ASsCvdX0_OI2qed0clnCcrQ.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F2588%2F1%2ASsCvdX0_OI2qed0clnCcrQ.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Under the &lt;strong&gt;Mapping Templates section&lt;/strong&gt;, we need to add the following code:&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;



&lt;h3&gt;
  
  
  B. Method Response
&lt;/h3&gt;

&lt;p&gt;We know that for URL redirections, &lt;strong&gt;302 HTTP Status code&lt;/strong&gt; is used. Therefore in the response header, we need to set the appropriate status code since by default &lt;strong&gt;200&lt;/strong&gt;is** **set.&lt;/p&gt;

&lt;p&gt;In the &lt;strong&gt;Method Response&lt;/strong&gt; section, we need to &lt;strong&gt;delete the 200 status code association&lt;/strong&gt; and &lt;strong&gt;add the 302 HTTP Status Code&lt;/strong&gt;. To instruct the API gateway to redirect to the URL set in the Location key in the Response header, we need to add it to the corresponding 302 Response Header.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F3840%2F1%2ARNh5t9eZZuCADRHEOveNdg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F3840%2F1%2ARNh5t9eZZuCADRHEOveNdg.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  C. Integration Response
&lt;/h3&gt;

&lt;p&gt;After setting up the &lt;strong&gt;Method Response&lt;/strong&gt;, now, we have to also format the Response that DynamoDB would be sending, to a format understandable by the Client.&lt;/p&gt;

&lt;p&gt;For this, we need to set up another &lt;strong&gt;Mapping Template&lt;/strong&gt; in the Integration Response section.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F3796%2F1%2ANgGf_dF9O64z6UtiTxYbAA.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F3796%2F1%2ANgGf_dF9O64z6UtiTxYbAA.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Under the &lt;strong&gt;Mapping Templates section&lt;/strong&gt;, we need to add the following code:&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;Thus, we have set up our GET request, which would redirect the short URL to the actual LongURL after fetching it from DynamoDB.&lt;/p&gt;

&lt;p&gt;To test, we need to click on the &lt;strong&gt;TEST&lt;/strong&gt; option from the above console. In the {shortId} field, we need to enter the shortId of the URL and click on the &lt;strong&gt;TEST&lt;/strong&gt; button.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F3744%2F1%2ARvGf85HGlF3uw7mNlL9JAQ.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F3744%2F1%2ARvGf85HGlF3uw7mNlL9JAQ.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Thus we have received a &lt;strong&gt;302&lt;/strong&gt; response code and upon studying the response header, we see a location key that contains the actual Long URL.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;And we reached the end of the solution!!!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;You can visit the repository from below:&lt;/p&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/Lucifergene" rel="noopener noreferrer"&gt;
        Lucifergene
      &lt;/a&gt; / &lt;a href="https://github.com/Lucifergene/Serverless-URL-Shortener" rel="noopener noreferrer"&gt;
        Serverless-URL-Shortener
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;p&gt;Serverless URL Shortener&lt;/p&gt;
&lt;p&gt;A simple serverless URL shortener built using API Gateway, DynamoDB and optionally Lambda functions&lt;/p&gt;
&lt;p&gt;The beauty of serverless is the ability to build things fast, at the lowest price and the least efforts. AWS API Gateway can be leveraged to&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h3 class="heading-element"&gt;Shortener With Lambda Functions:&lt;/h3&gt;

&lt;/div&gt;
&lt;p&gt;&lt;a rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/23396903/108629071-32b28f00-7484-11eb-8b47-12ff50acaf83.PNG"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F23396903%2F108629071-32b28f00-7484-11eb-8b47-12ff50acaf83.PNG" alt="Shortener With Lambda Functions"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;div class="markdown-heading"&gt;
&lt;h3 class="heading-element"&gt;Shortener Without Lambda Functions:&lt;/h3&gt;

&lt;/div&gt;
&lt;p&gt;&lt;a rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/23396903/108629059-229aaf80-7484-11eb-9d38-e2095334370f.PNG"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fuser-images.githubusercontent.com%2F23396903%2F108629059-229aaf80-7484-11eb-9d38-e2095334370f.PNG" alt="Shortener Without Lambda Functions"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;A repo inspired from Eric Johnson's &lt;a href="https://github.com/aws-samples/amazon-api-gateway-url-shortener" rel="noopener noreferrer"&gt;repo&lt;/a&gt;.
&lt;br&gt; Slide deck for the presentation - &lt;a href="https://github.com/Lucifergene/Serverless-URL-Shortenerkonf.me/presentation" rel="noopener noreferrer"&gt;konf.me/presentation&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;



&lt;/div&gt;
&lt;br&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/Lucifergene/Serverless-URL-Shortener" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;br&gt;





&lt;p&gt;You can reach out on my &lt;a href="https://twitter.com/avik6028" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt;, &lt;a href="https://instagram.com/avik6028" rel="noopener noreferrer"&gt;Instagram&lt;/a&gt;, or &lt;a href="https://linkedin.com/in/avik-kundu-0b837715b" rel="noopener noreferrer"&gt;LinkedIn&lt;/a&gt; if you need more help. I would be more than happy.&lt;/p&gt;

&lt;p&gt;If you have come up to this, do drop an ❤️ if you liked this article.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Good Luck&lt;/strong&gt; 😎 and &lt;strong&gt;happy coding&lt;/strong&gt; 💻&lt;/p&gt;

</description>
      <category>aws</category>
      <category>serverless</category>
      <category>urlshortener</category>
      <category>dynamodb</category>
    </item>
  </channel>
</rss>
