Forem

Cover image for How I Deployed My React Application on AWS Cloud S3 and CloudFront – A Complete Walkthrough
Durga Vellingiri
Durga Vellingiri

Posted on

1

How I Deployed My React Application on AWS Cloud S3 and CloudFront – A Complete Walkthrough

Step 1: Prerequisites

  1. Node.js and npm installed on your local machine.
  2. An AWS Account with Administrator access.

Image description


Step 2: Create a React Application

  1. Open your terminal or command prompt.
  2. Run the following command to create a new React app: npm create vite@latest
  3. Replace durgav with your desired project name.
  4. Navigate into the project directory: cd durgav

Image description


Step 3: React Configuration

  1. Start the development server to ensure everything works: npm start
  2. Open http://localhost:3000 in your browser to view the app.

Image description


Step 4: Build the React App

  1. Stop the development server (if running) by pressing Ctrl + C in the terminal.
  2. Run the build command: npm run build This will create a build/ directory in your project containing the optimized production-ready files.

Image description


Step 5: Create an S3 Bucket

  1. Navigate to the S3 service in the AWS Management Console.
  2. Click on Create bucket.
  3. Provide a unique bucket name (e.g., 714022205029-durgav).
  4. Choose a region and click Create bucket.

Image description


Step 6: Enable Static Website Hosting

  1. Select the newly created bucket.
  2. Go to the Properties tab.
  3. Scroll down to the Static website hosting section.
  4. Enable static website hosting.
  5. Specify the following:
    • Index document: index.html
    • Error document: index.html
  6. Save the changes.

Image description


Step 7: Update Bucket Permissions

  1. Go to the Permissions tab.
  2. Edit the Bucket policy
  3. Replace 714022205029-durgav with your bucket name.
  4. Save the bucket policy.
  5. Open the S3 bucket in your browser.
  6. Verify that your React app loads correctly.

Image description


Step 8: Test S3 Bucket Deployment

S3 URL: http://714022205029-durgav.s3-website-us-east-1.amazonaws.com/

Image description


Step 9: Configure CloudFront

  1. Navigate to the CloudFront service in the AWS Management Console.
  2. Click Create Distribution.
  3. Choose Web as the delivery method.
  4. Under the Origin Settings:
    • Set Origin Domain Name to your S3 bucket’s endpoint (e.g., my-react-app-bucket.s3.amazonaws.com).
    • Enable Restrict Bucket Access if you want to use an origin access identity (OAI).
  5. Scroll down to Default Cache Behavior Settings:
    • Set Viewer Protocol Policy to "Redirect HTTP to HTTPS".
  6. Click Create Distribution.
  7. Wait for the distribution status to change from "In Progress" to "Deployed" (this may take several minutes).

Image description


Step 10: Test CloudFront Deployment

  1. Open the CloudFront distribution’s domain name in your browser.
  2. Verify that your React app loads correctly.

CloudFront URL: https://d26g5tt7mopw9r.cloudfront.net/

Image description


Congratulations! You have successfully deployed your React app to AWS S3 and CloudFront. Your application is now highly available and optimized for global delivery.

Top comments (0)