How to Host ReactJS Websites on Vercel with Environment Variables ?

Last Updated : 02 Nov, 2023

In this article, we will learn how to host our ReactJs projects on Vercel and use Environment Variables in this tutorial. Vercel is a platform for developers to deploy and host their projects online, where they can showcase their skills to others.

What is an Environment Variable?

We conceal API keys, database linkages, and other crucial information from the general public using environment variables. Additionally, it ensures that users have access to very important information on our production-level website or project and helps us protect our database from hackers.

Also, if you share your codes on any public repository like GitHub then you don’t want to share your API keys, because if it is a paid service then every API request made through your API key will cost you a dollar. So, it is important to hide this information from the public repository as well.

What is Vercel?

Vercel is a platform for developers to deploy and host their projects online, where they can showcase their skills to others. It is really easy to use, as developers can easily link their Github profiles and easily deploy their projects. Additionally, this platform gives developers access to numerous premium features without charge.

Prerequisites:

Steps to create the project:

Step 1: Command to create Reactjs project in the terminal.

npx create-react-app project-name

Step 2: Now we have to install some npm packages to run our project smoothly:

npm i dotenv

The Project Structure will look like:

File Structure

Include the name of the “.env” file in the “.gitignore” file after this.

Step 3: Code for App.js and .env files:

We will first declare the project’s environmental variables in the “.env” file. Prior to that, always label your variables “REACT_APP”; this is how development nomenclature works.

.env file:

REACT_APP_NAME = SK ELAF AHMED
REACT_APP_COMPANY = GEEKS FOR GEEKS
REACT_APP_HOSTING = VERCEL

Example: Below is the basic implementation of the above steps

Javascript

import './App.css'; 
  
function App() { 
    return ( 
        <div className="App"> 
            <h1> 
                Hi, I am {process.env.REACT_APP_NAME} 
            </h1> 
            <h1> 
                I work in {process.env.REACT_APP_COMPANY} 
            </h1> 
            <h2> 
                Here we are hosting this website on  
                {process.env.REACT_APP_HOSTING} 
               </h2> 
        </div> 
    ); 
} 
  
export default App;

Explanation: After declaring the variables, we wrote the code in our App.js file, and to access the variables we have to write them as:

process.env.VariableName

Output on localhost:

LocalHost

Step 4: Create a GitHub repository and push the local code to the remote repository:

You can set up a GitHub repository, and then we’ll merely carry out the subsequent actions. To push the code to GitHub, we must perform a few commands on the terminal of our local projects.

git init
git add .
git commit -m "First Commit"
git remote add origin "Repository Link"
git push origin master

Now, after successfully uploading the code the repository will look like this:

Repository for this project

Step 5: Now we will open Vercel and host this website:

Visit Vercel.com, and if you are new then we suggest you sign up with your GitHub account because eventually, we have to connect the GitHub repository with Vercel. After that, you will see the dashboard then click on “Add New” > “Project” as shown in the image:

Vercel Dashboard

Now, if you already connected your GitHub account then the repositories will be shown there, and select the repository for your project.

Configure Your Project

We must declare them on the Environment Variables tab, as we can see above. Additionally, Vercel always encrypts them to ensure customer privacy is never compromised. Don’t forget to include each Environment variable one at a time.

After that, hit the “Deploy” button and wait since constructing the react project requires some time. Once your website has been properly launched, you will be given a deployment URL that will allow you to view it and share it with others.