Deploying a React App Using Amazon S3 and CloudFront

Deploying your React application to the cloud is a great way to make it accessible to a global audience. In this guide, we’ll go through the steps to deploy a React app using Amazon S3 for hosting and CloudFront for content delivery.

Why Use S3 and CloudFront?

Amazon S3 is an ideal choice for hosting static websites because it is scalable, reliable, and cost-effective. CloudFront enhances this by acting as a Content Delivery Network (CDN), delivering your content faster to users around the world.

---

Step 1: Preparing Your React App

1. Check Node.js Version

Ensure you have Node.js installed on your system. You can check the version with:

node -v

If not installed, download it from Node.js.

2. Create Your React App

You can create a React app using Create React App (CRA) or Vite:

npx create-react-app my-app
# OR for Vite
npm create vite@latest my-app

3. Run the Development Server

Navigate to your project folder and start the development server:

cd my-app
npm start
# OR for Vite
cd my-app
npm install 

# For creating a local host link to run the app on web browser
npm run dev

Ensure the app works as expected in your browser.

4. Build the App

To prepare your app for production, generate the build folder:

npm run build

This will create a build or dist folder containing the production-ready static files.

---

Step 2: Set Up Amazon S3

1. Create an S3 Bucket

• Log in to the AWS Management Console and navigate to S3.
• Create a new bucket (e.g., my-react-app). Ensure the bucket name is unique globally.
• Enable public access for the bucket.

2. Enable Static Website Hosting

• In the bucket settings, go to the Properties tab.
• Enable Static Website Hosting.
• Set index.html as the index document.

3. Upload the Build Folder

• Upload the contents of your build or dist folder to the S3 bucket.
• Ensure all files, including index.html, are uploaded.

---

Step 3: Configure CloudFront

1. Create a CloudFront Distribution

• In the AWS Management Console, navigate to CloudFront.
• Create a new distribution and choose your S3 bucket as the origin.

2. Configure Settings

• Set the Default Root Object to index.html.
• Configure custom error responses:
  • For HTTP 404 or 403 errors, redirect to index.html.

3. Deploy the Distribution

• Save your configuration and wait for the CloudFront distribution to deploy. This might take a few minutes.

---

Step 4: Access Your App

Once the distribution is deployed, you’ll get a CloudFront domain (e.g., https://dxxxxxx.cloudfront.net). Use this domain to access your deployed app.

---

Additional Tips

1. Cache Invalidation

Whenever you update your app, invalidate the CloudFront cache to reflect changes immediately. You can do this in the CloudFront settings.

2. Environment Variables

If your app uses environment variables, make sure they are correctly configured during the build process. For React apps, variables must start with REACT_APP_.

3. Security

• Use HTTPS for secure communication. CloudFront provides HTTPS by default.
• Configure S3 bucket permissions carefully to avoid unintentional data exposure.

---

Conclusion

Deploying a React app with Amazon S3 and CloudFront is a robust and scalable solution for hosting static websites. By following these steps, you can ensure your application is globally accessible with optimized performance.

Happy coding! 🚀

If you have any questions or suggestions, feel free to share them in the comments below. Let’s build something amazing together!