Building S3 Static Website With AWS CDK and Projen | Hands on Cloud

Handsoncloud
2 min readMay 10, 2021

In this blog post, we will create an awesome React TypeScript App hosted in an S3 static website bucket. For that we will use AWS CDK and Projen.

But first I will explain what AWS CDK and Projen are and why I strongly recommend using Projen for AWS CDK.

Then we dive into creating the React App which will be afterward deployed in an S3 bucket with AWS CDK.

AWS CDK
AWS CDK stands for Cloud Development Kit and is an open-source framework for creating and managing AWS resources. By using languages familiar to the developer such as TypeScript or Python, the infrastructure is described as code. In doing so, CDK synthesizes the code into AWS Cloudformation Templates and can optionally deploy them right away.

AWS CDK Logo
AWS CDK has been experiencing a steady increase in enthusiastic developers since 2019 and already has a strong and helpful community that is very active on Slack.

There is of course much more to say about AWS CDK and I recommend you to explore it.

Projen
Projen allows sophisticated management of project configuration files through code. With just a few lines of typed JavaScript code, an entire repository can be configured.

Here is an example:

const { AwsCdkTypeScriptApp } = require(‘projen’);

const project = new AwsCdkTypeScriptApp({
authorAddress: ‘damadden88@googlemail.com’,
authorName: ‘martin.mueller’,
cdkVersion: ‘1.99.0’,
cdkVersionPinning: true,
defaultReleaseBranch: ‘main’,
name: ‘cdk-s3-website’,
});

project.synth();
These few lines create all the GitHub project files your heart desires.

Among them the package.json, .gitignore, tsconfig.json and many many more.

Projen emerged out of the AWS CDK community and contains helpful tools for creating AWS CDK Apps.

Why using Projen instead of CDK directly?
Projen is a lightweight wrapper around CDK so you are in fact using CDK under the hood. Furthermore it helps you with managing dependencies like those from AWS CDK. That’s a huge help as managing those dependencies in a package.json yourself is very time consuming and not pleasant. You will understand what I mean when we start with coding.

Projen Logo
Projen is widely used in the CDK Community and I strongly recommend you trying it.

Here is an awesome-projen list from existing Projen projects.

I really love Projen and use it a lot for my private projects and my work with clients. It lets me iterate and try out AWS CDK code very fast and after using Projen for many month it still feels like cheating ❤. As an AWS cloud developer I want to run stuff quickly and not bother wit setting up other stuff like the repository.

It helps me to understand better and faster repos from other creators if they are using Projen for there project. So it becomes a kind of standard.

If you want to know more about Projen have a look into my other Projen posts.

Visit Us:- https://hands-on.cloud/building-s3-static-website-with-aws-cdk-and-projen/

--

--