Deploying React Application on Web using AWS Amplify

Today, the majority of businesses have switched to cloud computing and are willing to take a chance. Amazon Web Options (AWS) cloud platform is often regarded as the best among the several cloud adoption services currently offered. Over 90 services and products that are intended to assist developers in building quick, dependable, serverless, and secure web and mobile applications are now part of Amazon's constantly expanding portfolio.

Introduction

AWS Amplify is a full suite of tools and services created to make it simple for developers to build and release apps. It was introduced in 2017. Additionally, it might have ready-to-use components, code libraries, and a built-in command-line interface (CLI). The ability to swiftly and securely integrate a variety of tasks, from API to AI, is this tool's most important asset.

The user experience is another factor in the introduction of AWS Amplify. User experience is the most crucial factor that must be taken into account while creating any programme. The user experience across many platforms, including online and mobile, was intended to be unified through AWS Amplify.

Amplify effortlessly scalable with your business from thousands of users to tens of millions of users and covers the entire mobile application development workflow from version control and code testing to production deployment.

The open source Amplify libraries and CLI, which are a component of the Amplify framework, provide a pluggable interface that you may personalise and develop your own plugins for.

Benefits

• Don't reinvent the wheel; instead, concentrate on your business. Why create your own authentication system when there are already ones out there that can handle MFA, social providers, and all business features?

• Use Amplify to prototype cool ideas and discard features one at a time if necessary. Why not take advantage of the high-quality proof of concept work Amplify makes possible? As an illustration, you could construct your API using produced AppSync resolvers and then gradually replace them with custom resolvers as needed (similarly to Create React App).

• Solid DevOps requires good multi-environment design. On-the-fly bootstrapping of new environments is possible. Additionally, the amplification environments can use the same git procedure.

Getting Started

In this article, you will be seeing how we can easily deploy any web application on AWS Amplify. For example, here we are going to deploy a React Application. The source code can be found on the following Github link.

Pre-requisites

• an AWS account (of course 🤪)
• Node.JS installed in your system
• a Github Account and Git CLI installed in your system
• Code Editor of your choice (VSCode preferred)

Cloning and Testing the Application Locally

First, we are going to clone the repository and run the application locally in our system. Create a directory in your system and open it with VSCode. You can use the in-app command terminal to execute the code snippets.

To start, clone the repository with the following command:

git clone https://github.com/aditya-sridhar/simple-reactjs-app

Once the repository is cloned, you will see a new directory inside the folder. Navigate inside the directory and type the following commands:

npm install

This will install all the dependencies required to run the application, in your system.

Once completed, you can run the application with the following command:

npm start

The web browser will pop up and you will be seeing the following page:

Thus, we have successfully cloned and tested the application in our local system.

Pushing the application code to your Github Account

Now, we have to upload the code to your Github account, so that you can use the code with AWS Amplify. For creating a repository, we are going to use the Github CLI.

First, delete the .git folder present in the root directory.

Then, initialize the directory with the following command:

git init

After that, lets create a repository with the Github CLI. Type the following command:

gh repo create aws-react-hosting

This will create a repository in your Github Account. Finally. we will be pushing the codes in this repository.

git add .
git commit -m "First Commit"
git remote add origin <link-to-your-github-repo>
git push -u origin main

Deploying on AWS Amplify

Now let's move on to deploy the application to AWS Amplify.

1. Open the AWS HomePage.

2. Login and visit the Console.

3. Select AWS Amplify from the List.

4. You will reach to the following page:

5. Select GitHub from the Options available.

6. Authorize the connection and select the repository you had created earlier.

7. Click Next and Save and Deploy.

8. Finally, you will come to the following page:

9. Once all the stages are completed, click on the link to see the live website.

Thus, we have successfully deployed a React application on AWS Amplify!!!

Conclusion

For web and mobile developers, Amazon Web Services Amplify can be quite helpful. For full-stack apps, all built-in authentication, alerts, and APIs may be implemented with a minimum of effort. Giving your clients the best value instead of wasting time managing the application infrastructure allows you to concentrate on your top priorities.