Hackforge Academy

Explanation

Amazon CloudFront is a content delivery network that caches and delivers web content from locations close to users. It can improve performance for React applications hosted on S3.

Code:

User -> CloudFront Edge Location -> S3 Origin

Explanation

Create a CloudFront distribution with the S3 bucket as its origin. Prefer an origin access control configuration so the bucket does not need to be publicly readable.

Code:

CloudFront distribution:
Origin: React S3 bucket
Default root object: index.html
Viewer protocol: Redirect HTTP to HTTPS

Explanation

Set index.html as the default root object. When a user opens the domain root, CloudFront will request the React entry file from the origin.

Code:

Default root object:
index.html

Explanation

Single-page React applications need fallback handling for client-side routes. Configure suitable error responses or rewrite rules so paths such as /dashboard return index.html.

Code:

Example application routes:
/
/dashboard
/profile
/settings

Fallback document:
index.html

Explanation

CloudFront may cache old JavaScript and HTML files. After a deployment, create an invalidation when required so users receive updated content.

Code:

aws cloudfront create-invalidation \
  --distribution-id ABCDEFG123456 \
  --paths '/*'