How to Host ReactJS Websites on Vercel with Environment Variables ?

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:

• ReactJs
• GitHub
• NodeJs

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:

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

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:

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:

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:

Now, if you already connected your GitHub account then the repositories will be shown there, and select the repository for 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.
 

This is the dashboard following a successful deployment. If you click the link, your host's website with the domain Vercel will open.
 Output:

The website URL is successfully hosted on Vercel with the appropriate Environment Variables.