Building the React Project
1.Open the command prompt and navigate to your project directory.
2.Run the following commands to create and set up your React project:
npx create-react-app your-react-app-name
npm install
npm run dev
Once the development server starts, you will see your app running on a local IP address.
You can modify the application code in the src/App.tsx file as needed.
Creating an S3 Bucket
1.Log in to the AWS Management Console.
2.Search for S3 in the search bar and click on it.
3.Click on the Create bucket button.
4.Provide a unique name for your bucket.
Note: The bucket name must be globally unique.
5.Select the ACL disabled option. This ensures that all objects in the bucket are owned by this account.
- Disable the Block all public access option.
7.Click Create bucket to finalize the process.
8.Upload your React project files and folders to the bucket.
9.Configuring Static Website Hosting
10.Navigate to the Properties tab of your S3 bucket.
11.Scroll down to the Static website hosting section and click Edit.
12.Enable static website hosting and provide the name of your main file (e.g., index.html).
13.Save the changes.
14.Setting Bucket Permissions
15.Move to the Permissions tab.
16.Generate a new Bucket Policy:
17.Copy your bucket’s ARN number.
18.Use the policy generator to create a bucket policy that grants public read access.
Add the generated bucket policy to your bucket.
Modify the Resource field in the policy to include “/*” at the end, ensuring that all files in the bucket are accessible.
Save the changes.
Configuring CloudFront
1.Navigate to the CloudFront service in AWS.
2.Click Create Distribution and choose your S3 bucket in the Origin Domain field.
3.Enable the following settings:
Redirect HTTP to HTTPS.
Set the appropriate caching and security options.
4.Disable the Web Application Firewall (WAF) option if you don’t need it.
Save the changes and wait a few minutes for the CloudFront distribution to deploy.
Once deployed, copy the CloudFront domain URL and open it in a new browser tab.
By following these steps, your React project is successfully hosted on AWS S3 and securely delivered via CloudFront!
