Automating the process of building the application, installing the dependencies, synchronizing with S3 bucket, and clearing CloudFront distribution cache

Introduction

Hemanth of Alliance Department here. In this blog, I tried automating the process of building the application, installing the dependencies, synchronizing with S3 bucket, and clearing CloudFront distribution cache.

To deploy a React application by storing files in S3 and accessing the application over CloudFront, please see the blog below.

S3

Simple and popular AWS Service for storage. Replicates data by default across multiple facilities. It charges per usage. It is deeply integrated with AWS Services. Buckets are logical storage units. Objects are data added to the bucket. S3 has a storage class on object level which can save money by moving less frequently accessed objects to a colder storage class.

CloudFront

AWS CloudFront is a content delivery network (CDN) service that aids in the speedy and dependable distribution of static and dynamic information with high performance, security, and developer friendliness. It distributes your content over a global network of edge sites, or data centers that are close to your users. Using serverless compute features, you can also alter the code that is executed at the AWS CDN edge.

React

A user interface library for JavaScript. It enables the creation of reusable and interactive components. React can be used to make a complicated web app2 or to add some dynamic elements to a straightforward HTML page.

Demo

This is how my current react app looks when i access via clousfront Now making changes in the code, for example changing the background color to yellow from pink
Adding a scripts folder

mkdir scripts

Now creating a deploy script in it

touch scripts/deploy.sh

Type the following code in the deploy script Making the script executable

chmod +x ./scripts/deploy.sh

Now executing the script [Configure your AWS CLI before proceeding further]

scripts/deploy.sh S3bucket CloudfrontDistribution

Checking the Cloudfront and it has been updated

Conclusion

Hope with this you get an idea of how to automate the process of building the application, installing the dependencies, synchronizing with S3 bucket, and clearing CloudFront distribution cache. Thank you for seeing the blog till the end.