# 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

```bash
npx create-react-app
```

Or if you are in a hurry, you can try [Vite](https://vitejs.dev/). 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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684082064671/0647e87d-095c-4fa6-81a8-9c2e5ecb4875.png align="center")

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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684082564425/77d89ee0-4c9f-472b-b454-0536796a69c9.png align="center")

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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684082653592/077f2171-1a6a-4045-b253-5cf6f24100fe.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684082715914/c1b34366-f12a-46cd-a77d-f67f536e1c7a.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684082755947/7f8d4834-0789-4f89-a380-2bf8a1e16ca0.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684082827344/cf4c1960-6262-4208-9ae2-4f72e34fd66d.png align="center")

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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684082982348/9417e6ba-09f5-4d1c-b5f5-7988683db1d6.png align="center")

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

My site is now live :

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684083047091/c51818e8-05be-4868-a7d0-a42880634441.png align="center")

### 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.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684083232200/a6d3cd9f-6db0-4a3d-8d2d-3952115aa5d4.png align="center")
    
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.
    
    ```json
    { "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](https://www.buymeacoffee.com/anjaangaire) .