Host your React app to Vercel

React.js, commonly referred to as React, is an open-source, powerful front-end javascript library. It is used to build beautiful user interfaces by combining multiple components of code into fully functional websites. We can build whole sites with React or use something minimal for just a page in a site.

React is created by merging JavaScript with XML, often known as JSX. While the learning curve for React is severe for a junior developer, it is one of the most popular and in-demand javascript libraries for front-end development.

Getting started with React is as easy as it can get. You just have to have Node.js installed locally. In your terminal type

npx create-react-app

Or if you are in a hurry, you can try Vite. It is fast and easy to set up any javascript project.

I'll not build an entire app from scratch but will use an existing one for this blog.

I have a project ready with Vite and React js. I've set up a GitHub repo for the project and will deploy the app from GitHub to Vercel.

First, go to https://vercel.com and register for free. You'll then be redirected to your dashboard where you can add your projects.

Click on the Project on the dropdown and you'll be redirected to the import section.

Use the search bar if your repository is not shown by default and the matching repos will be listed here.

Click on the Import button. You'll now see the configuration for your project. I'll use the default config, you can change anything here.

You can override the build commands, output directory, install commands and add environment variables if you want.

Now click on the Deploy button at the bottom of the screen.

Your deployment should finish almost instantly for small projects, but it may take longer for larger applications.

Congratulations you just deployed a new project to Vercel!

If you now continue to the dashboard you'll see your production build listed there. Click on the project you just deployed and you'll see the production deployment of your product.

If you click on Visit at the top of your page, you'll be redirected to your site.

My site is now live :

Common bugs and fixes

1. Environment Variables

   If your project uses environment variables, and you fail to add them while building your project, your project may fall back to some error response rather than your site.

   This can be easily fixed by adding environment variables to your project. Go to your project settings in Vercel and go to Environment Variables. Add your variables from here, or copy your .env directly.

   

2. Routes

   Sometimes when deploying react app, your page shows a 404 error even if you have set up your routes correctly. This can be fixed easily with a few lines of code.

   Go to your project root and create a file called vercel.json and add the following code there.

    { "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }] }
   

Conclusion:

You'll now be able to host your projects to Vercel without any issues. You can also host other projects with Vercel using their built-in templates that make it easy to deploy projects faster.

Thanks for reading the blog, if you have any questions, I'll be happy to answer them as far as I can.

If you like the content I'm posting, you can support me here: https://www.buymeacoffee.com/anjaangaire .