Hosting React Application Using S3 and Cloudfront

STEP 1: Check node and npm is already installed in your system,if not install them.

STEP 2: Initialize a new project with the Vite build tool,Enter your project name.

STEP 3: Select a framework "REACT".

STEP 4: Select a Variant "TYPESCRIPT".

STEP 5: Now run the above three commands one by one.

STEP 6: Check localhost:5173

STEP 7: Now our react application is created successfully!

STEP 8: Open the project in vs code,then run the command "npm run build".This command compiles and bundles your source code and placed in a directory "dist\".

STEP 9: Now want to create a bucket with unique name.

STEP 10: Now enable the static web hosting.

STEP 11: Now want to add bucket policy.

STEP 12: Now upload the files and folders from the dist folder in your bucket.

STEP 13: Then go to properties,scroll down,you can find bucket website endpoint,then click it.

STEP 14: Our React application is hosted using S3.

STEP 15: Now create a cloudfront distribution for hosting a react Application.

STEP 16: Copy the distribution domain name and paste it in a new tab.Now we can see the same result.

STEP 17: And finally delete the cloudfront distribution.