DEV Community

Nirosha Jaganathan
Nirosha Jaganathan

Posted on • Edited on

Static Website Hosting(S3+CloudFront) - React App

Check npm and node installed or not
npm -v
node -v
Creating a react app
Run the following Commands
npm create vite@latest
cd Nirosha
npm install
npm run dev

Image description

Follow the link to see the react app
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 like name, reg number.

Image description

Image description

Run the command in visual studio code

Image description

Create S3 Buckets in Aws console

Image description

Block all Public access

Image description

Enable Static Web Hosting

Image description
Image description

Edit the Bucket Policy
Generate Bucket Policy & Save Changes

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 index.html URL

Image description

CloudFront
Create Distribution

Image description

Image description
Image description

delete cloudfront

Image description
Delete Objects in S3
Image description
Delete Objects in S3
Image description

Top comments (0)