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

Lester — Tue, 17 Sep 2024 21:18:14 +0000

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

Select CodeCommit, next
Add repository and branch, next
Review app settings: App name, Build settings (use "npm run build" for Frontend build command and "dist" for Build output directory), next
Save and deploy
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"

AWS Amplify Gen2 Authentication

Lester — Tue, 11 Jun 2024 23:15:01 +0000

Some times the guides does not help much and something is missing to make thinks work. In this case, this guide will help setting up a new project in AWS Amplify with Cognito Authentication.

There we go with the required steps:

Create a GitHub or CodeCommit repo.
Create a React App, in my case I'm using Vite.

npm create vite@latest my-app-name
npm install

Add amplify to the new React app

npm create amplify@latest

Commit the changes to master/main branch
Create Amplify app in the AWS Console, select your repository and the master/main branch.
Once the deployment has been completed, download the file amplify_outputs.json and put it on the root of your project.
Add the authentication component, it can be found here: https://docs.amplify.aws/react/build-a-backend/auth/set-up-auth/

And that's it, now you can use Cognito authentication in your React app. I spent some time struggling with backend deployment on Amplify but it was because I didn't follow the correct order on this steps, we need first to add the Amplify files (step 3) and then deploy the app (step 5), otherwise the backend deployment will not be there.

See you in a next post!

DEV Community: Lester

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

Repository and React app setup

Create AWS Amplify App

AWS Amplify Gen2 Authentication