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

vamsitupakula_

Vamsi Krishna

Posted on July 15, 2022

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.

Image description

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.

Image description

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 🌹🌹

πŸ’– πŸ’ͺ πŸ™… 🚩
vamsitupakula_
Vamsi Krishna

Posted on July 15, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related