Hosting React.js website on Vercel

As a beginner react developer I used to find a way to host React.js based websites. Initially I was using Github pages to host it but one of the drawback was that we need to configure our app to make our routing work perfectly and I personally did not like it. In the beginning of this Year (2022) I started with Next.js and found Vercel provided the best hosting for it. I got an idea to host React.js website on it and it went perfectly find.

Lets see what is Vercel then we will see how can we host our React.js website on Vercel.

Vercel

Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration. You can read more on their website at https://vercel.com/

Hosting our website

To host your website, you need to have one 😅
In this article we will not be discussing how to create a website instead we will be hosting an already build UI made on React.js.

I have a frontend of a Todo list that I will be hosting on vercel.

First Step

The first step is to make a Github repo. If you do not have a Github account then you can create one at https://github.com/. Since I already have an account I will now create a new repository at Create a New Repository (github.com).

Creating a Repository on Github

The first thing I am doing is naming my repository. I will first name it and will leave the other fields as default.

Now once it is created you’ll see something like this.

Now the information here will help us push our react code on github. To do that we will execute few commands in our terminal.
We will first initalize git.

git init

Next add all files that we will be deploying. To do that we will execute the below command.

git add .

Next we will commit with a message.

git commit -m 'vercel commit'

Now we will choose our branch.

git branch -M main

Next we will define the origin.

git remote add origin https://github.com/MuqtadirBillah/vercel-hosting.git

You can find the above command on your new repo page. You can see mine in highlighted text in the screenshot below.

Next, we will push our code using below command.

git push -u origin main

Now once it’s successful you will be able to see all files in our new repo after reloading the page.

Now let’s do the main thing. Host on vercel.

Hosting on Vercel

If you don’t have an account you can create one at https://vercel.com/login?next=%2Fdashboard

Now once it’s created, we will host it. You will see a “Add New” button

On click of the button you will select project.

Next it will ask you to signin with github. Now once you login it will show the most recent repositories, or you can search for one.

Let’s import the “vercel-hosting” repo. Once it imported you will see the configuration page.

Here it auto detecting. Now just click on Deploy button. Now it will take some time to build.

Now once it is built successfully you will see this with a preview of your website and a button to continue to dashboard.

Next we will click on the button where you will see another page with similar view and a visit button.

If you click on the visit button you will see your live website. You can see mine at Login (vercel-hosting-one.vercel.app) but it is still under constructions.

Now we know how to host our React.js websites on Vercel.

Follow me for more interesting tips and tricks at Musab Abbasi — Medium
You can also find me on LinkedIn and Github