Learn different ways of deploying your React app in the cloud in 2023 [Part 1]
Tags: aws, react, lionnellubangi, deployreact2023
Published: 2023-02-09 21:33:40

In this serie of articles, I will show you more than 9 ways of deploying your react application for free. For this tutorial, we are not going to dig far into the process of creating an application, rather, we will focus on the main topic which is the deployment. I will provide you with a GitHub [link](https://github.com/lubangi/React-simple-Product-list.git) that you could clone from my repository and then follow along with me. But, you don't need to do that, if you have any react application on your local machine, open it in the editor and follow the different steps below:

Summary :

1. Vercel
2.1 AWS Amplify
2.2 AWS S3 + CloudFront
3.3 AWS EC2
3. Firebase
4. Netlify
5. GitHub Pages
6. Heroku
7. Surge
8. Render
9. GitLab Pages

**Prerequisites:**

- Node.js
- A react application (https://github.com/lubangi/React-simple-Product-list.git)
- A GitHub account
- Git
- A terminal

Let's get started

**1 Vercel**

**Steps to follow:**

1. Open the [project](https://github.com/lubangi/React-simple-Product-list.git) cloned in your IDE(VsCode),
2. Open the terminal and install the dependencies:

```
npm install
```
3. Start the project :

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


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


Vercel is a revolutionary serverless deployment service designed for React, Angular, Vue, and other JavaScript libraries. You can easily import projects from GitLab or Bitbucket with Vercel. Automatic SSL is one of the many cool features it offers.

To deploy Vercel, create a new account. You can quickly log in using OAuth.

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

next click on authorize:

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

At this point, you should see a popup as shown in the image below:

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

Select your GitHub repository and click on **install**

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

In the next step, click on import to import your project :

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

Here, you can leave the default selection, but if you created your app with a framework other than CRA, then choose the appropriate framework in the dropdown menu.

Then click on Deploy:

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

You will see that Vercel is processing, wait until it finishes:


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

And my application is ready :

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

Click on continue :

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

Now you should see your App with two links:

The first is your domain, the second is the link to your GitHub repository.

And if I click on the first link, my App will open in a new tab, here's the screenshot:

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

Congratulations, you have finished the first part of this Tutorial, i will continue tomorrow with AWS.

[Preview the app](https://react-simple-product-list-lubangi.vercel.app/)

Thank you for reading!

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
































Firebase
Netlify
GitHub Pages
Heroku
Surge
Render
GitLab Pages