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

This content originally appeared on DEV Community and was authored by Vamsi Krishna

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

This content originally appeared on DEV Community and was authored by Vamsi Krishna

Print Share Comment Cite Upload Translate Updates

APA

Vamsi Krishna | Sciencx (2022-07-15T04:22:08+00:00) How to Host your React App for Free. (Part 2). Retrieved from https://www.scien.cx/2022/07/15/how-to-host-your-react-app-for-free-part-2/

MLA

" » How to Host your React App for Free. (Part 2)." Vamsi Krishna | Sciencx - Friday July 15, 2022, https://www.scien.cx/2022/07/15/how-to-host-your-react-app-for-free-part-2/

HARVARD

Vamsi Krishna | Sciencx Friday July 15, 2022 » How to Host your React App for Free. (Part 2)., viewed ,<https://www.scien.cx/2022/07/15/how-to-host-your-react-app-for-free-part-2/>

VANCOUVER

Vamsi Krishna | Sciencx - » How to Host your React App for Free. (Part 2). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/07/15/how-to-host-your-react-app-for-free-part-2/

CHICAGO

" » How to Host your React App for Free. (Part 2)." Vamsi Krishna | Sciencx - Accessed . https://www.scien.cx/2022/07/15/how-to-host-your-react-app-for-free-part-2/

IEEE

" » How to Host your React App for Free. (Part 2)." Vamsi Krishna | Sciencx [Online]. Available: https://www.scien.cx/2022/07/15/how-to-host-your-react-app-for-free-part-2/. [Accessed: ]

rf:citation

» How to Host your React App for Free. (Part 2) | Vamsi Krishna | Sciencx | https://www.scien.cx/2022/07/15/how-to-host-your-react-app-for-free-part-2/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.