DEV Community

Dharshinisri G
Dharshinisri G

Posted on

Static Website Hosting(S3+CloudFront) - React App

Log in to your AWS console by entering your credentials

Check npm and node installed or not
npm -v
node -v
Image description

Creating a react app
Run the following Commands
npm create vite@latest
cd Dharshinisrig
npm install
npm run dev

Image description

Follow the link to see the react app

Image description

The React App should run and the output should look like

Image description

Open the React App and Edit the App.tsx with your informations

Image description

Image description

Run the command -> npm run build

Image description

Create a S3 Bucket in the Aws console

Image description

Remove Block all Public access

Image description

Enable Bucket Versioning & Add Tags according to needs

Image description

Enable Static Web Hosting In Properties of the Bucket

Image description

Edit the Bucket Policy in Permissions of the Bucket

Image description

Copy Bucket ARN

Image description

Generate Bucket Policy & Save Changes

Image description

Image description

Image description

Upload all the Files and Folders in the dist folder in the React App to the S3 bucket

Image description

Copy the URL of the index.html file

Image description

Or Copy the Bucket Endpoint and Run in the browser
Link - http://714022205024-dharshinisrig.s3-website-us-east-1.amazonaws.com

Image description

Image description

CloudFront
Create Distribution

Image description

WAF Disable

Image description

Create Distribution & Deploy using CloudFront

Copy Distribution Domain name
URL - https://d2yop5uofve2kk.cloudfront.net
Image description

Run URL in the browser

Image description

*Delete CloudFront *

Image description

Delete Objects in S3

Image description

Delete S3 Bucket

Image description

Image description

Top comments (0)