How to host a React Project for free

How to host a React Project for free

Building your first react app is an amazing feeling for every code newbie, but hosting, and showcasing this project is a little bit difficult because it follows a different procedure than just pushing to GitHub, and hosting on your favorite cloud platform, but do not worry, I am here to guide on how to host your first react project, which can be showcased to friends, family, and even employers.

Now, let's get started.

These are the steps to be followed sequentially:

1

Open your react project folder, in your favorite text editor (I will be using VS code), and use this shortcut to open VScode terminal Ctrl + Shift + ` or simply click "Terminal", and select "New Terminal".

terminal.png

termina 2l.png

2

Once the terminal is open, you must type npm run build in the terminal.

termina 3l.png

npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main.

Here is the response you should get:

termina 4l.png

In your projects folder, you should notice, a new folder named "build" has added to your react project folder:

termina 5l.png

3

Now that you have this created, all you need to do is push to GitHub.

To push to GitHub, you need to create a new repository for your project, and run these commands in the VScode Terminal

git init
git add .

after running those commands copy this block of code from the newly created repo, and run it in the terminal:

termina 8l.png

termina 9l.png

After running these commands, you should get this response in the terminal:

termina 10l.png

Refresh your GitHub page, and you should see that the file has now been added. You have successfully pushed your project to GitHub, what is left is hosting it.

4

To host your project, you need a cloud platform, but we will be using Vercel [vercel.com] in this guide.

Create a new Vercel account, and follow these steps:

termina 11l.png

termina 12l.png

termina 13l.png

termina 14l.png

And finally, you have successfully hosted your first react project.

termina 15l.png