Search for a command to run...
Avik Kundu is a Software Engineer at Red Hat. He is a full-stack developer, opensource contributor, and tech content creator proficient in DevOps and Cloud. He has 3 years of experience with a focus on Container Orchestration and Continuous Delivery. He has written articles and tutorials on various tools and technologies and has given talks on cloud-native technologies in various communities.
No comments yet. Be the first to comment.
In this series, I will discuss about various AWS services and build applications with them.
Introduction In an era dominated by personalized experiences, recommendation systems have become essential for businesses seeking to engage and retain customers. Amazon Personalize is a leading solution, offering advanced machine learning capabilitie...
Introduction In an era dominated by personalized experiences, recommendation systems have become essential for businesses seeking to engage and retain customers. Amazon Personalize is a leading solution, offering advanced machine learning capabilitie...
Quick Tutorial to demonstrate the use of Amazon Fraud Detection to detect frauds during registration
Step-by-Step walkthrough for setting up CircleCI and ArgoCD for Deploying applications on Kubernetes
Step-by-Step walkthrough for setting up Knative, CircleCI and ArgoCD for Deploying serverless applications on Kubernetes
Walk-through of a serverless implementation of an URL Shortener Service without AWS Lambda Functions
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.
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.
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.
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.
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.
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
Now let's move on to deploy the application to AWS Amplify.
Open the AWS HomePage.
![Hong Ly - How to Deploy React App to AWS Amplify for FREE [gTxEZrsDk3w - 1280x720 - 5m03s].png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659047019643/Y2-hQtuIW.png)
Login and visit the Console.
![Hong Ly - How to Deploy React App to AWS Amplify for FREE [gTxEZrsDk3w - 1280x720 - 5m08s].png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659047341284/N0IT_1s8h.png)
Select AWS Amplify from the List.
![Hong Ly - How to Deploy React App to AWS Amplify for FREE [gTxEZrsDk3w - 1280x720 - 5m28s].png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659047383761/1bdZuzjL-.png)
You will reach to the following page:
![Hong Ly - How to Deploy React App to AWS Amplify for FREE [gTxEZrsDk3w - 1280x720 - 5m38s].png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659047428687/3b5tS7Sls.png)
Select GitHub from the Options available.
![Hong Ly - How to Deploy React App to AWS Amplify for FREE [gTxEZrsDk3w - 1280x720 - 5m58s].png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659047484225/snF_-VR0p.png)
Authorize the connection and select the repository you had created earlier.
![Hong Ly - How to Deploy React App to AWS Amplify for FREE [gTxEZrsDk3w - 1280x720 - 6m28s].png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659048194516/3JANkQft1.png)
Click Next and Save and Deploy.
![Hong Ly - How to Deploy React App to AWS Amplify for FREE [gTxEZrsDk3w - 1280x720 - 6m48s].png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659048262433/egDFtdSiG.png)
Finally, you will come to the following page:
![Hong Ly - How to Deploy React App to AWS Amplify for FREE [gTxEZrsDk3w - 1280x720 - 7m08s].png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659048330864/lq7tFpHRp.png)
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!!!
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.