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

ldbravo

Lester

Posted on September 17, 2024

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
Enter fullscreen mode Exit fullscreen mode
  • Create react app with vite:
npm create vite@latest .
Enter fullscreen mode Exit fullscreen mode
  • Select framework: React, variant: TypeScript

  • Install packages

npm run install
Enter fullscreen mode Exit fullscreen mode
  • Commit and push app creation with vite to main branch
git add .; git commit -m "App creation with vite"
git push
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"

💖 💪 🙅 🚩
ldbravo
Lester

Posted on September 17, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related