How to deploy a React project to a free web host server
Tags: react, netlify, webdev
Published: 2023-01-11 12:43:30

In this article, we’ll learn how to deploy our ReactJS project to a free web host server which called [Netlify](https://www.netlify.com/).

> If you want to create an editor in any of your React project using CKEditor 5 (include image upload with no server-side configuration and many cool features…) then checkout my article [here](https://dev.to/trinhcamminh/using-ckeditor-5-in-reactjs-include-upload-image-and-many-cool-functionality-38km) ❤.

## Drag and Drop the Build Folder in Netlify
The fastest and easy way to deploy a React application is just to drag and drop the builder folder in Netlify.

To create a builder folder, just execute one of two codes below from the command line from your project folder.

`npm run build` or `yarn build`

Once the build folder is created, you just need to drop the folder in the drop area under the sites menu


![drag and drop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehavlwcudpyc7i7zfaqp.gif)

## How to deploy an App to Netlify from a GitHub repository
This is my favorite way of deploying my React project to server since it super simple and convenience.

Every time you push any changes to GitHub repository, it will automatically be deployed to Netlify. Also, you can rollback your site if you wish.

If you already have a repository on GitHub, then all you need to do is just to connect it.

Login to your Netlify account, access the dashboard page and click on the `New site from Git` button.

![netlify home](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzeswnj9q7qynfggf143.png)

Click on the GitHub button and connect to your GitHub repository.


![git provider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4semcn784kcafox1kzi.png)

It will open a new tab, make sure the popup in enabled in your browser.


![select repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qfnoxb1ht4bxmd09wq52.png)

Search for the GitHub repository in the search box. Once you selected, you will see the following screen

![deploy repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yw2k5t8ij0oxl51k3l0e.png)

All these configs are fine, you don’t need to change anything.

Now click on Deploy site button, once clicked you will see the Site deploy in progress message.

![deploying process](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3vifaz9l5vydmw1746v.png)

You’ll have to wait a minute until the process done. Once deployed is completed, you will see the following screen


![deployed app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvvyzx81fnu2bj9uqbtl.png)

Click the link and you will be surprised. Tada, we have done it 😜

![deployed app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fkn008dgubbi2jih92zm.gif)

Awesome, now anytime you make any change to your repository, Netlify will automatically update your site according to your change, cool right.

Now the next section will be more excited.

## How to change your site name in Netlify

At the moment, our domain quite ugly since it’s very hard to remember for anyone, especially when you have a lot of deployed projects. Luckily, Netlify provide us an easy way to solve this problem.

Click on the `Site setting` button displayed on the Site overview section.


![site setting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zn1iltgxvq9rck6xyowb.png)

The click on the `change site name` button and enter your new name. Save it and now you can access your site with that new changed name.


![change site name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kqb3c1qf7ldlnoejse7.gif)

## Thanks for reading ❤

If this post was useful to you, please leave me a like and follow me that help me a lot 😁.

Also, if you want to find more interesting content like this from me you can refer to my [portfolio](https://minhct.netlify.app/) website or my [GitHub](https://github.com/trinhcamminh) in case you want to see all the project that I have done 💋.

Again, thank you so much and have a good day 😘😘.


![my logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xoaqifxb4f4i18k1d16x.png)