Deploying a React.js App on AWS Amplify in 3 Minutes

Deploying web applications quickly and efficiently is essential in today's fast-paced development environment. AWS Amplify, a cloud-based platform by Amazon, makes deploying and managing full-stack applications, including React.js, incredibly straightforward.

In this guide, I’ll show you how to deploy your React.js github repository on AWS Amplify in just 3 minutes. Let’s dive in and bring your application to life in record time!

Step 1: Create a React App Locally and Push it to GitHub

Before deploying your React.js application on AWS Amplify, the first step is to set up your app locally and upload it to a GitHub repository. This ensures that your application’s code is version-controlled and accessible for deployment.

Step 2: Log In to AWS Console and Navigate to AWS Amplify

After setting up your React app on GitHub, the next step is to deploy it using AWS Amplify. First, login AWS Management Console using your credentials and go to AWS Amplify, then click on create new app

Step 3: Connect Your GitHub Repository to AWS Amplify

Now it's time to connect your GitHub repository and configure the deployment.

1. Choose Your Source Code Provider

• On the AWS Amplify dashboard, you'll see the "Start building with Amplify" page, as shown in the screenshot.
• Select GitHub as your source code provider and select Next (because I already uploaded my source code into GitHub).

2. Authenticate Your GitHub Account

• AWS Amplify will prompt you to authenticate your GitHub account.
• You will see the Install & Authorize page, where you can manage which repositories AWS Amplify can access.
• You can choose between two options:

All Repositories: Grants AWS Amplify access to all current and future repositories.

Only One Repository: Provides access to specific repositories only.

If you select Only One Repository, choose your React app repository (e.g., recipe-app) as shown.

After reviewing the permissions, click Install & Authorize to grant access.

Step 4: Add Repository and Branch

Once GitHub is authorized, the next step in AWS Amplify is to select the repository and branch that you want to deploy.

1. Select Your Repository

• In the Add repository and branch section, choose your GitHub repository from the dropdown menu. In this work, the repository SachithMayantha/recipe-app is selected.
• If your repository doesn't appear:
  • Ensure the AWS Amplify GitHub App has permissions to access your repository.
  • Push a new commit to your repository and click the Refresh button.

2. Select Your Branch

• After selecting your repository, choose the branch you want to deploy (e.g., aws-amplify ).
• Ensure that the branch contains the latest version of your app's code.

3. Monorepo Configuration (Optional)

• If your repository is a monorepo (a single repository containing multiple projects), check the My app is a monorepo option.

Once you’ve selected the repository and branch, click Next to configure your app’s build settings.

With the repository and branch set, you’re now ready to configure build settings for your React app!

Step 5: Configure App Settings and Build Settings

After selecting the repository and branch, the next step is to configure your app settings and verify the build settings.

1. App Name

• The App name field will be pre-filled based on your repository name (e.g., recipe-app).
• You can leave it as it is or change it to a custom name for better identification.

2. Auto-Detected Framework

• AWS Amplify will automatically detect the framework used in your project. In this case, it recognizes that the app is built using React.
• This ensures the correct build settings are applied for your framework.

3. Build Settings

• Verify the Frontend build command and Build output directory:
  • Frontend build command: This is the command used to build your app. For React apps, it’s npm run build.
  • Build output directory: This is the folder where the build output is generated. For React apps, it’s usually build.

4. Advanced Build Settings (Optional)

• If your project requires environment variables or custom build scripts, you can add them under the Advanced settings section.

5. Save and Continue

• Once everything is configured and verified, click Next to proceed to the review and deployment step.

With the app settings and build configuration complete, you’re ready to review your deployment settings and launch your React app! Let’s move on to the final step.

Step 6: Review and Deploy Your React App

Now that you’ve configured your app settings and build steps, it’s time to review your deployment details and launch your app.

1. Review Deployment Details

• On the Review page, check the following:
  • Repository Details: Verify the GitHub repository name, branch (e.g., aws-amplify), and monorepo root path (if applicable).
  • App Settings: Confirm the app name, framework (React), and build configuration (e.g., npm run build with the build directory).
• If you need to make changes, click the Edit button next to the respective section.

2. Start Deployment

• Once you’ve reviewed the settings, click the Deploy button to start the deployment process.
• AWS Amplify will begin building and deploying your app, as shown in the "Deploying app".

3. Monitor Deployment Progress

• Amplify provides real-time updates during the build and deployment phases. You can see:
  • Build Duration: The time it takes to build your app.
  • Deploy Duration: The time it takes to deploy your app to the hosting environment.

4. Access Your Deployed App

• After the deployment is complete, you will see a Deployed status.
• A unique domain URL will be provided. Click on this link to view your live React app.

Congratulations! Your React app is now live on AWS Amplify, and you’ve successfully deployed it in just a few simple steps. 🎉