If creating your React project was simple, wait till you actually deploy it.
We’re kidding. Deploying React apps is easy, now with the click of few buttons.
Prerequisites
You are here to learn how to deploy your React app. So the prerequisite is exactly that - a React app, and an AWS account.
For simplicity sake, we’ll be deploying this nice one-pager React app.
You can use this React template by clicking on Use this template button.
Create your first AWS Amplify app
- Sign in to your AWS account.
- Go to AWS Amplify by typing in the search bar, and hit Enter.
If this is your first time creating an AWS Amplify app, you’ll be seeing the Amplify landing page.
Click on Deploy an app.
Choose a source code provider.
Once you do, you’ll be met with the Create new app page, with options to choose your source code provider.
- GitHub
- Bitbucket
- CodeCommit
- GitLab
Since we already have a GitHub repo, we’ll select GitHub as the option. Click Next.
Note
If you want a NextJS, Vue, Angular or Vite template app to be created, you can select your option from Start with a template.
In case of a NextJS app, it’s in early stages, so you might face some deployment issues.
A popup from GItHub will open, asking you to authorize AWS Amplify in your specified region.
It will next ask you about the GitHub account your React app repository is in. That’s exactly where AWS Amplify will be used.
In this case, we selected LearnAWS-io as our account (second option). Click Next.
Now, choose whether you want to install and authorize AWS Amplify for all the repositories in your account, or just the ones you select.
We don’t want to launch this popup and do everything again the next time we want to publish our apps on Amplify, so we select All repositories.
This will give AWS Amplify the permission to:
- Read your code, and see your pull requests
- Create deployment hooks / status checks
Click Install & Authorize.
Add your repository and branch.
In this step, select the repository which has your React app code from the dropdown. You can create a repository and click the Refresh button to the right, if you don’t see your repository in the list right away.
Choose the main branch of your repo (the entry point).
Select your branch as main (usually), or master.
If your app is a monorepo (i.e. you have your frontend and backend code in the same Git repo), check the option:
- My app is a monorepo
Also, specify the frontend directory path (e.g.
frontendorapps/frontend).
Done till here, comrade? Click on Next.
Set up automatic builds for your React app.
In the next screen App settings, you’ll see that AWS Amplify has autofilled the names of your repository app and also build commands from the access it has from GitHub.
Note
You might face deployment errors if you use pnpm run build as your frontend build command.
That’s because AWS doesn’t have pnpm preinstalled in the build image it uses to build your app.
In this case, change the command to npm run build instead, and it should work!
App Settings
- App name
Build Settings
By default, AWS Amplify automatically detects your build settings. All you need to do is verify your:
- Frontend build command (
npmis recommended) - Build output directory (is it
dist?)
Use environment variables in your app.
If you are using environment variables in your app, but you don’t want to put them in your repository (for obvious security reasons) - expand the Advanced Settings section and add your key(s).
All done? Click Next.
Review your details.
The Review page will show you all the changes you have done for your AWS Amplify app in a nutshell.
Here you can go back and edit anything that doesn’t feel right:
- Repository details
- App settings
- Advanced settings
Click Save and deploy.
Voila! Your app should be live.
After a while, you’ll be greeted with this screen:
This is the Deployments screen.
This screen shows you:
- when your build started
- how long your build took
- domain / live URL of your deployed React app
- repository name
If you go down, you’ll find the Deployment history tab.
Troubleshooting Amplify build
Note
If your deployment fails due to the error - command: pnpm not found, go to your build image settings and change pnpm to npm.
version: 1
frontend:
phases:
preBuild:
commands:
- npm install
build:
commands:
- npm run build
artifacts:
baseDirectory: dist
files:
- '**/*'
cache:
paths:
- node_modules/**/*
## Starting Frontend Build
# Starting phase: preBuild
# Executing command: pnpm install
2024-11-29T11:08:06.300Z [WARNING]: pnpm: command not found
2024-11-29T11:08:06.382Z [ERROR]: !!! Build failed
2024-11-29T11:08:06.382Z [ERROR]: !!! Error: Command failed with exit code 127
2024-11-29T11:08:06.382Z [INFO]: # Starting environment caching...
2024-11-29T11:08:06.382Z [INFO]: # Environment caching completed
Check out the deployed app. Success!
Your website is now live at your Amplify URL!
