How to Host a React Application with CloudFront and Secure It with AWS WAF

Are you looking to boost the performance and security of your React application? Look no further than leveraging CloudFront distribution caching and Web Application Firewall (WAF) integration. In this guide, we will explore how to host your React application efficiently using CloudFront, while enhancing its security with WAF. By following these best practices, you can ensure your application is not only fast and responsive but also protected against potential threats. Let’s dive into the world of optimized React application hosting with CloudFront distribution and WAF integration

Let’s deep dive into it.

STEP1: I have used a React Notes app, Create a build for that React app.

npm run build

STEP 2: Create two S3 buckets.

1. www.xyz.tech and xyz.tech one bucket will hold the static website data and the other will be used for redirection purposes. Xyz refers to your domain name.
2. Copy that build folder into the www.xyz.tech bucket