Deploying React App With AWS CDK, Cloudfront & Codepipeline

Before we start with react app I would recommend to develop CDK project inside development docker container.

So we no longer have the issue of "this works on my computer". And it will not mess with your existing workflow.

So checkout my blog post for detailed video explanation.

Then checkout CDK development container settings on github.

And react js development container settings on github.

Now let's get started on deploying react js app.

View deploy react js source code on github.

So first you have to build the cdk app with

cdk init app --language typescript

I chose typescript language because I normally write react app in typescript.

Then we are going to create SSL certificate for our final domain as follows.

So when you buy domain on AWS then the DNS hosting is automatically created on Route53.

I did try to create public hosted zone with cdk. But then you need to update name servers on your domain manually.

So I decided to use default DNS hosting created on Route53.

So first get access to hosted zone. Then using this zone create dns validated ssl certificate.

We will need to access this certificate again so print out the certificate arn.

Very important: Each stack file has hard limit of 500 resources. So try to spread out the code.

I have designated certificate stack file for all future sub domain certificate.

Subdomain can be used for API, webhooks, blog, app or other things. Also make sure to deploy each part at a time.

Do not deploy the whole stack at once.

Then we are going to create a bucket to store built react app as follows.

To create a bucket all we need is a unique bucket name. Now this bucket name must be unique in all AWS users.

The best way to maintain uniqueness is with using domain name for bucket name.

The default bucket removal policy is to retain bucket after the resource is removed from CDK.

But I want bucket destroyed after I am done with this app.

Also just because you set removal policy to destroy doesn't mean it will work.

Your stack will crash with error the bucket you tried to delete is not empty.

So you need to manually empty the bucket either from aws console or aws cli.

Also we need to access this bucket in future so just print out the bucket arn for reference.

Only after the part 2 is deployed then move on to part 3 and create origin access identity for the bucket as follows.

Adding comment is optional and use comment for your reference only.

Only after the part 3 is deployed then move on to part 4 and create cloudfront distribution as follows

This is where the certificate arn printed in last stack file came in handy.

Now the default price class is the cheapest option. But I want to use every possible CDN location.

It will be most expensive but it will create better customer experience.

Important tip: Always add parameter that decides the price of that service.

In other words even if the default value of parameter is what you want then still manually add the parameter.

Because in future iteration of CDK they may change default value. And you will end up paying extra for it.

By default the defaultTtl is 1 day or 24 hours. I have changed it to 1 hour.

In the beginning you will have small app with lots of new features.

Over period of time you will have large app with less new features and more of refinement or bug fixes.

At this stage your files will remain mostly the same. So this is right time to change defaultTtl to 1 day or 24 hours.

But in the beginning I recommend keeping it to 1 hour.

Make sure to select latest securityPolity TLS certificate.

At the time of writing this article TLS_V1_2_2019 is latest certificate.

Only after the part 4 is deployed then move on to part 5 and create cloudfront alias for domain as follows

So currently website is served from cloudfront domain. Now you are pointing your custom domain to the cloudfront domain.

Only after the part 5 is deployed then move on to part 6 and create www to non-www redirect as follows

I already have blog post on www to non-www redirect.

Also at the same time I am creating a codecommit repository for saving the react app.

Only after the part 6 is deployed then move on to part 7 and create CI pipeline as follows

So when building pipeline project I have selected build image of linux standard 5.0. Its basically Ubuntu 20.04 and node 14.x LTS version.

Here the default compute type is small however I have manually set it to small because the default may change in future.

Make sure to set pipeline name to human readable name. Most likely set it to domain name + pipeline.

You may want to look at list of pipelines on aws console and select pipeline based on this name.

The artifact bucket is optional and automatically generated. I created manually because I wanted to set removal policy to destroy.

Again removing bucket will fail if bucket is not empty. So empty the bucket from console before removing the bucket.

So there are 3 stages in pipeline. First is to get latest master commit from code commit.

Then build react app with code build. And finally deploy react app to s3 bucket.

And cloudfront is already programmed to get files from this bucket.

Now in code above we have mentioned to look for buildspec.yml file inside react js project.

So lets create react project and add buildspec.yml file with following code.

So before building react app we have mentioned to install nodejs first.

Then install react app dependencies as per package.json. And update if there is newer version available.

The simply build with `npm run build`. This will create build folder with final code. And we are setting the output to build directory.

View backend and react app on github.