Learn different ways of deploying your React app in the cloud in 2023 [Part 2]
Tags: react, aws, deployreact2023, cloud
Published: 2023-02-10 06:59:52

I'm continuing with our series of articles about deploying a react app in the cloud in 2023. in the [previous articles that you can read here](https://dev.to/lubangi/learn-different-ways-of-deploying-your-react-app-in-the-cloud-in-2023-part-1-25lf), we learned to deploy a React application on **Vercel**, in this article, we will discuss deploying on **AWS Amplify**.

So, we had our [starter project that you can find here](https://github.com/lubangi/React-simple-Product-list.git), you could also use your own react project, all we need is to push it into the cloud. I strongly recommend you take a look at the previous articles.

The world of web development has evolved over the years.  There are now more and more tools and services that make development easy and reduce the time it takes to deploy a modern web app on the internet. 

Like many other services for deploying a web app, AWS Amplify is free to use, whereby you connect your GitHub repo from your Amplify console dashboard.

Follow those steps to deploy your react app on AWS amplify:

1. Clone the [starter project](https://github.com/lubangi/React-simple-Product-list.git) from my GitHub account (or use your project),

2. Open the project in any editor of your choice (VsCode),
3. install the dependencies :

```
npm install 

```
4. Run the project :

```
npm start
```
5. You should see the app in the browser:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mf8x8142h0ijbabhf48.png)

6. Now that you have the app, it's time to [create your repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-new-repository) and [push](https://docs.github.com/en/get-started/importing-your-projects-to-github/importing-source-code-to-github/adding-locally-hosted-code-to-github) the app on GitHub, if you followed me in the previous article, you don't need to create a new repository, you will use the same that you created before and your app should still be there unless you removed it. And if you get stuck when creating a repository or you can't push your project on GitHub, let me know in the comment below or my [Twitter account](https://twitter.com/LubangiLionnel), and I'll be happy to assist you.

So go ahead and create a new repository on GitHub if needed, 

Now go to the [official website of Amazon Web Services](https://us-east-1.console.aws.amazon.com/):

https://us-east-1.console.aws.amazon.com/

The first step is to create a new AWS account if you don't have one (You can login if you already have an account) :

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7oue9n63umz3r5qi1ksc.png)

Provide all pieces of information needed :


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36fqr1suiuzysnsn96ui.png)

After confirming your address,you will see something like this on your browser:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14xhvoqkincecqn1im16.png)
The next step is to provide your personal information:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j518cxk8diw1748vn2sm.png)

Next, you have to register your bank card:

Note that AWS will not take your momney, they just want to certify that you can pay their service in the future,that is why they say:

> _We will not charge you for usage below AWS Free Tier limits. We may temporarily hold up to $1 USD (or an equivalent amount in local currency) as a pending transaction for 3-5 days to verify your identity._


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ff7kruma5fga9lhg9chv.png)

Now go ahead and fill in all your information, once you are done, you should be able to access the AWS console :

Type **_Amplify_** in the search bar , then click on Amplify:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pa43d7sby03f932woxq.png)

Then, you will see two options on the right side of your dashboard, select  the appropriate option as shown in this screenshot: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dhi9bm84y8wb0oopt9ru.png)

Next, select your source, and click on GitHub:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pn4g49g2w4731lxwl8j5.png)

Next, authorize the connection to your GitHub account :

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjdvo8rhkrdkho1tvaqr.png)

Next, select the repository from your GitHub account  in the dropdown menu :

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7203d4u3wt9tkui9zg1z.png)
Next Amplify will be building your app,  click on Next to continue:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzl511g16sh9ot0bfdvq.png)

Next, click on Save and Deploy to deploy your app :

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ikls3hirli4voc42oyb3.png)

Finally, your application is in the cloud, click on the link you see at the bottom to view your application in the browser and share your link with whoever you want. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0w394bexy81b2u5uo05.png)

In the real world, you could associate your app with a custom domain such as asdf.com or asdf.net or anything else,[this guide ](https://docs.aws.amazon.com/amplify/latest/userguide/to-add-a-custom-domain-managed-by-a-third-party-dns-provider.html)could help you.

So dear friends, thank you for reading, I will meet you in the next article of our series when we will learn to deploy the same app using AWS S3 and CloudFront.

[Live preview](https://main.d15ke48xjiy7p7.amplifyapp.com/)

[Lionnel Lubangi ](https://twitter.com/LubangiLionnel), Developer.