How to Host Your React JS App with AWS Amplify

Welcome to the guide on hosting a React JS application in AWS Amplify. In this introduction, we'll explore how AWS Amplify simplifies the deployment process for React applications, offering scalability, reliability, and seamless integration with various AWS services. Whether you're a seasoned developer or just starting your journey with React, AWS Amplify provides an intuitive platform to effortlessly launch and manage your applications. Let's dive in and discover the power of AWS Amplify for hosting your React projects.

Assuming you're already logged in to the AWS console, let's explore how to host a React JS application using AWS Amplify

1. Search and select Amplify from your AWS Management console

   

2. Select “Create new app”

   
   

   

3. Select your source provider and click “Next”. Authorize AWS Amplify to connect to your Git repository

   

4. Select either “All repositories” or “Only select repositories” to authorize. Then click “Install & Authorize” to proceed. It may take a minute to sync with your Git repository.

5. After granting Git permission, the 'Choose source code provider' option will turn green, and you will be directed to 'Add repository and branch'. Search for and select your repository to deploy in Amplify.

6. The 'App settings' section will be displayed once the repository and branch to deploy are selected. Amplify will auto-detect the framework and pre-populate the default build command and build output directory for a React JS application. Verify the build commands and click 'Next'

7. Secret keys, backend API links, and other important variables used in the .env file must be added in the 'Environment variables' section.

8. A 'Review' section will be displayed to verify the repository and app setting details. Click 'Save and deploy' if the given details are correct.

9. The application will begin deploying

10. The initial status of the application will be “Deploying”

11. The status will change to 'Deployed' once it is successfully deployed. A domain URL will be provided for the deployed application. Clicking on the domain link will take you to the application

12. You may have received an error for using an invalid extension (e.g., OTF for a font). Check the extensions in ‘Rewrite and redirects’ in the hosting section, and add any used extensions that are not already present

13. A custom domain for the application can be added under 'Custom Domains' in the Hosting section

Deploying a React JS application in AWS Amplify is straightforward and user-friendly. With its intuitive interface and robust features, Amplify streamlines the deployment process, making it accessible to developers of all skill levels.