Hackforge Academy

Explanation

Amazon S3 can store the static files generated by a React production build. Create a bucket with a globally unique name and choose the appropriate AWS Region.

Code:

aws s3 mb s3://my-react-production-app --region ap-south-1

Explanation

The React application must be built before uploading it to S3. The build directory contains the files required to run the frontend.

Code:

npm run build

# Vite output directory
dist/

Explanation

The AWS CLI sync command uploads the contents of the React build directory to the S3 bucket. It also updates changed files during later deployments.

Code:

aws s3 sync dist/ s3://my-react-production-app --delete

Explanation

For a static React website, configure the S3 website settings with index.html as the index document. For production systems, CloudFront with secure access is generally preferred.

Code:

aws s3 website s3://my-react-production-app \
  --index-document index.html \
  --error-document index.html

Explanation

React Router applications need unknown routes to return index.html. This allows the client-side router to handle paths such as /dashboard or /profile.

Code:

index.html

# Configure your hosting layer to return index.html
# for application routes such as:
/dashboard
/profile
/settings