How to Host your React App for Free. (Part 2)

I had already wrote a blog about hosting your react app using github pages. Link : https://bit.ly/3aLFnG9

In this blog, we will see how to host your project using netlify.
There are two ways to host using netlify

1. By drag and drop
2. By authorizing github

Lets get started.

Drag and Drop

Step 1:
Head over to netlify.com and create a free account.

Step 2:
After successfully creating your account, the following page will appear.

Step 3:
In your project folder, open git bash or terminal and run the following command
npm run build

This will create a folder named 'build' in your project directory

Simply drag and drop build folder into the above appeared screen.

and Done Netlify will host your project 💥💥

Imagine Let say You had build a project and later you tried to update the project UI then the changes are not gonna reflect in your netlify app.

To make above query to happen, we use method 2

Importing from github

Step 1:
push your code onto github after committing all the changes.

Step 2:
In the following image you can see there is an option to import and existing project. Select it and authorize your github account.

Step 3:
Then you will see all your github repos, select your project repo
and done netlify will take care of hosting it and it will also observe the future changes to that repo.

Project I created Recently

I started learning about material UI and created a small app which generates random quote using an API.
Link : https://fancy-starlight-16b468.netlify.app/
Code available on github : https://github.com/vamsi-tupakula/quote-generator-react

Thank You for reading 🌹🌹