Create React app and deploy it on AWS Amplify - Sep 2024 update

Repository and React app setup

• Create repo in CodeCommit
• Clone repo:

git clone codecommit::us-east-1://my-react-app
cd my-react-app

• Create react app with vite:

npm create vite@latest .

• Select framework: React, variant: TypeScript

• Install packages
  

npm run install

• Commit and push app creation with vite to main branch

git add .; git commit -m "App creation with vite"
git push

Create AWS Amplify App

1. Select CodeCommit, next
2. Add repository and branch, next
3. Review app settings: App name, Build settings (use "npm run build" for Frontend build command and "dist" for Build output directory), next
4. Save and deploy
5. When app fails due to repository access:

CustomerError: Unable to clone repository due to user error code: 128

5.1. Create a service role:

https://docs.aws.amazon.com/amplify/latest/userguide/how-to-service-role-amplify-console.html

5.2. After service role creation, add it to Amplify settings:

Go to App settings > General settings > Edit > Select a "Service role" and save

Go to failed deployment and select "Redeploy this version"