AWS Builder Center

Builder Center

How to Host and Deploy a React App with AWS Amplify (Step-by-Step Guide)

Learn how to easily host and deploy a React application on AWS Amplify with automatic CI/CD pipelines, SSL certificates, and custom domain setup in a few simple steps.

vikash sharma

Web developer learning AWS, Cloud & DevOps. Interested in building and deploying applications.

Introduction

Deploying web applications effectively is just as important as building them. If you are building modern frontends with React.js, hosting them manually or configuring servers from scratch can consume unnecessary development time.
AWS Amplify simplifies frontend deployment by offering a fast, secure, and reliable hosting solution with built-in Continuous Integration/Continuous Deployment (CI/CD) pipelines. In this article, we will walk through hosting and deploying a React application using AWS Amplify in just a few minutes.

Prerequisites

Before getting started, make sure you have:
  1. A working React application pushed to a Git repository (GitHub, GitLab, or Bitbucket).
  2. An active AWS Account.
  3. Node.js and npm/yarn installed locally.

Step 1: Connect Your Repository to AWS Amplify

  1. Log in to the AWS Management Console and search for AWS Amplify.
  2. Click on All apps and then select New app > Host web app.
  3. Choose your Git provider (e.g., GitHub) and click Continue.
  4. Authorize AWS Amplify to access your GitHub repository and select the specific repository and branch (e.g., main or master) you want to deploy.

Step 2: Configure Build Settings

AWS Amplify automatically detects React project settings and generates a build configuration file (amplify.yml).
A standard React build configuration looks like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
Click Next to review your settings, then click Save and Deploy.

Step 3: Deployment & Automatic CI/CD

Once you click deploy, Amplify goes through four automated stages:
  1. Provision: Allocates isolated build environments.
  2. Build: Installs dependencies and compiles your React application code.
  3. Deploy: Copies the static build files to AWS hosting nodes worldwide.
  4. Verify: Tests and provides a default HTTPS web link.
Whenever you push new code updates to your GitHub main branch, AWS Amplify will automatically trigger a new build and deploy the changes instantly.

Step 4: Adding a Custom Domain and SSL (Optional)

Amplify provides a free SSL/TLS certificate for all deployments. You can easily link a custom domain (e.g., yourdomain.com) bought from Amazon Route 53 or any third-party registrar directly from the Domain Management section in the Amplify Console.

Conclusion

AWS Amplify removes the hassle of managing servers, configuring S3 buckets, or setting up complex CloudFront distributions manually. With automatic CI/CD and free HTTPS support, it is one of the most efficient ways to ship frontend React applications to production.
What hosting strategy do you prefer for React applications? Let me know in the comments below!
# developer# react# aws-amplify# ci-cd# javascript
Any opinions in this article are those of the individual author and may not reflect the opinions of AWS.
Enjoyed reading this content? Let the author know!

Your likes, comments, shares, and saves help creators reach more builders.

Loading recommendations

Loading article