Overview

Check out the deployed application @jockey.bekta.ch !

Spent last couple of weekends getting around ReactJS for the first time in my life. In the meantime came across serverless-stack and started digging deeper. And what an amazing resource this is!

And so, to actually try out something simple I decided to give a shot and deploy one of the serverless apps and see how much time it would take. Luckily AWS already has some templates such as the aws full-stack template.

However, serverless framework apps and AWS templates are almost always deployed by CloudFormation and since I’m not the biggest fan of this service, I decided to invest some time and translate it all to the language read Terraform that can speed-up some of the future development and integrations. Additionally, I was interested to see what React Bootstrap 4 offers out-of-the-box. Say hello to my little friend Jockey.


Jockey


Jockey is a fully-fledged, serverless web application, built on aws full-stack template and adapted fully to Terraform. Jockey serves as a form management tool read Poke Ball that allows you to add, update and remove your favourite pokemons.

The best part of this deployment? Completely free! Even with AWS Free Tier everyone is able to run such application and further develop it for months or even years before incurring any costs. Isn’t that something?


Architecture


Summary Diagram

High-Level Diagram


Frontend


Build artifacts are stored in a S3 bucket where web application assets are maintained (web graphics, etc.). Amazon CloudFront caches the frontend content from S3, presenting the application to the user via a CloudFront distribution. The frontend interacts with Amazon Cognito and Amazon API Gateway only. Amazon Cognito is used for all authentication requests, whereas API Gateway (and Lambda) is used for all API calls to DynamoDB.


Backend


The core of the backend infrastructure consists of Amazon Cognito, Amazon DynamoDB, AWS Lambda, and Amazon API Gateway. The application leverages Amazon Cognito for user authentication, and Amazon DynamoDB to store all of the data for the pokemon items.


Developer Tools


The code is hosted in AWS CodeCommit. AWS CodePipeline builds the web application using AWS CodeBuild. After successfully building, CodeBuild copies the build artifacts into a S3 bucket where the web application assets are maintained (web graphics, etc.). Along with uploading to Amazon S3, CodeBuild invalidates the cache so users always see the latest experience when accessing the storefront through the Amazon CloudFront distribution. AWS CodeCommit. AWS CodePipeline, and AWS CodeBuild are used in the deployment and update processes only, not while the application is in a steady-state of use.


Implementation


For the boilerplate source, clone jockey repository.

First Phase - Interface & Backend Deployment:

  1. Export your AWS creds to shell env vars
  2. Navigate to interface-backend/src/ dir and run terraform init && terraform apply and type yes on user prompt
  3. After successfull apply, all your AWS services can be seen in AWS Console Frankfurt region
  4. Note your terraform outputs for the next phase

Terraform Attributes

Second Phase - Front-End Deployment:

  1. Navigate to webassets/src/ dir and open config.ts
  2. Insert your previously noted Terraform Outputs in the appropriate fields ex. eu-central-1 instead of {AWS_REGION}

    export default {
    MAX_ATTACHMENT_SIZE: 5000000,
    apiGateway: {
    REGION: "eu-central-1",
    API_URL: "https://xxxxxxxxx.execute-api.eu-central-1.amazonaws.com/prod",
    },
    cognito: {
    REGION: "eu-central-1",
    USER_POOL_ID: "eu-central-1_xxxxxxxx",
    APP_CLIENT_ID: "6gdgegxxxxxxxxxx",
    IDENTITY_POOL_ID: "eu-central-1:ffxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx"
    }
    };
    
  3. After filling in necessary values, navigate to webassets/ dir and run npm install && npm start

  4. If all npm dependencies are properly installed you should be able to see Jockey app running on localhost:3000

Third Phase - Developer Tools Trigger:

  1. In your AWS Console navigate to CodeCommit and locate your repository jockey-pokemon-webassets
  2. You need to push your webassets code into this repository after which the CodePipeline will be triggered and the website will be built within CodeBuild Project
  3. At this point you can check for your static website files in the appropriate S3 bucket and try to access your website by going to CloudFront Service, copying the domain name of your distribution and pasting the URL in you favourite read Firefox browser

Conclusion

Honestly, not a bad way to spend some time following this post-lockout mayhem. #makelockoutsgreatagain

In the other news, can’t accept that #netflix already releases last 2 episodes of #lastdance tomorrow. ๐Ÿ˜” Definitely gonna binge watch all 10 next week. #belikemike ๐Ÿ€