In this fast-moving world of evolving technology, where every day brings forth a new innovation or technology to the market, we find ourselves continually relying on the backbone of our digital experiences: web and mobile applications.

Many developers and programmers are familiar with developing and designing a performant and scalable web application in this era where there are plenty of languages, frameworks, and tutorials available online. But the problem arises when we have to make our application go live. This is when we require the help of a cloud/devops engineer.

But what if there was a way for developers to deploy the application using IAAC, i.e., infrastructure as code? This is when AWS CDK comes into play.

Introduction to AWS CDK

The AWS Cloud Development Kit (AWS CDK) is a framework that lets you define your cloud infrastructure as code using familiar programming languages.

The AWS CDK was first announced as a developer preview at the AWS Summit in New York on July 17, 2018. It reached general availability (GA) on July 11, 2019, with initial support for TypeScript and Python programming languages. Since then, it has expanded to support Java and C# as well.

Now, if you have a good understanding of AWS Services and it’s properties, you can easily write a CDK script to deploy your application or just create the infrastructure required to host your application.

npm install -g aws-cdk

cdk --version

npm install -g typescript

Step 2: Create a Project

We will be creating a directory for our project and then we will be initializing our CDK app inside it.

mkdir frontendcdk
cd frontendcdk
cdk init app --language typescript

import * as cdk from 'aws-cdk-lib'; // For core constructs
import * as cloudfront from "aws-cdk-lib/aws-cloudfront"; // For creating cloudfront distribution
import * as cloudfrontOrigins from "aws-cdk-lib/aws-cloudfront-origins"; // For setting up cloudfront origin
import * as s3 from "aws-cdk-lib/aws-s3"; // For creating S3 bucket
import { Construct } from 'constructs'; // For defining resources in a stack

// Create a S3 bucket
const bucket = new s3.Bucket(this, "myApp", {
      bucketName:  'myappbucketcdkstack',
      blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL,
      publicReadAccess: false,
      removalPolicy: cdk.RemovalPolicy.DESTROY,
      autoDeleteObjects: true
});

1. bucketName: Specify unique name for your bucket
2. blockPublicAccess: For security, we don’t want to make our bucket public and will be keeping private.
3. publicReadAccess: We don’t want to provide public read access for our bucket.
4. removalPolicy (Optional): When we destroy our cdk stack we want to also delete the S3 bucket during this tutorial. By default, when you perform CDK destroy, AWS does not deletes the created S3 bucket.
5. autoDeleteObjects (Optional): This field is optional and is used along with removalPolicy. By default, if bucket contains objects then it won’t get deleted by your removalPolicy and will give you error. In order to delete your bucket along with all your objects autoDeleteObjects flag is used. Be cautious while using this ⚠.

Step 5: Creating Cloudfront Distribution

Let’s now start creating cloudfront distribution for our s3 bucket hosted web application.

  private cfnOutCloudFrontUrl: cdk.CfnOutput;
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

And now to print domain name of our created cloudfront distributionadd the below code after your cloudfront distribution

npm run build

The required resources are defined in an AWS CloudFormation stack, called the bootstrap stack, which is usually named CDKToolkit. Like any AWS CloudFormation stack, it appears in the AWS CloudFormation console once it has been deployed.

3. Synthesize an AWS Cloudformation template

Synthesizes a AWS CloudFormation template from one or more of the stacks in your AWS CDK app.
The cdk synth command executes your app, which causes the resources defined in it to be translated into an AWS CloudFormation template.

The displayed output of cdk synth is a YAML-format template.
The template is also saved in the cdk.out directory in JSON format.

cdk synth

cdk deploy

After successful deployment, output will look like this and it will print the cloudfront distribution url to deploy your application.

Import the following libraries at the top of lib/frontendcdk-stack.ts file

import * as s3Deploy from "aws-cdk-lib/aws-s3-deployment"; // To deploy objects to an S3 bucket
import * as path from "path"; // For working with files and directory paths

new s3Deploy.BucketDeployment(this, 'myAppDeployment', {
   sources: [
     s3Deploy.Source.asset(path.join(__dirname, '../web-build')),
   ],
   destinationBucket: bucket
});

If you found this post helpful, give it a 👏 and follow for more useful blogs. Thanks, and have a great day!