How to use environment variables (Vite + Vercel)?
Tags: vercel, vite, javascript, tutorial
Published: 2023-11-20 00:15:08

Necessary concepts to understand the article:

- What's vite
- What's vercel
- How can we create an application with vite
- How can we deploy a vite application on vercel

An environment variable is a value that can be changed depending on the environment in which our application is running. For example, suppose we want our application to make a call to localhost when it is in development mode. However, when it is in the production environment, we want our application to make a call to a specific IP address of a remote machine.
In this tutorial, we will put exactly this example into practice.

1. **Create a .env file in the root of your Vite project.**

Once you have created a project with Vite, add a file named .env. Add the following line to the file:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1j9mb65o2uubrefe5q0.png)

This line means that we are passing the value '_localhost_' to the environment variable _VITE_APP_API_URL_. It's important to note that environment variables used in Vite projects should always have the prefix '_VITE__' before the rest of the variable name.

2. **Use the environment variable created in some part of your code.**

Since we are using the environment variable to be part of a string that makes API calls, let's add it to a part of the code that does that. Like the one below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rs3otxk5op81uhnn1bfc.png)

Note that we are using our variable as part of a larger string that will make a GET method call to the '_/products_' endpoint. It's important to highlight that in order to access the variable we added in the .env file, we should use the prefix _import.meta.env_. before referring to the variable we want to use, rather than the common _process.env_ used in Node applications.

3. **Place the .env file in your .gitignore.**

The environment variable is also an important way to ensure that sensitive information such as secret keys granting access to APIs, databases, etc., is not shared. Therefore, it is crucial to include it in the .gitignore so that it is not considered when the code is pushed to your remote repository.

4. **Open your project on Vercel and create an environment variable for the production environment.**

Access your project on Vercel and click on the Settings tab.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/teip65llopp8ejdoas4i.png)

On the left sidebar, click on 'General' and then on 'Environment Variables'.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xgkwq6onw4xa33dx1t16.png)

Therefore, add the environment variable that we added in the .env file and assign the IP of the remote machine you want to access. Choose in which environments you want to use this variable. Here, I selected only the production environment.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g23f1fvwbv8refwgmt39.png)

Once added, the environment variable will appear at the bottom of the screen, like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mor5tijc38el8pqvb9ih.png)

Now, everything is ready. When you access your project, you can open the developer tools and see that what appears as part of the string composing the URL is what we added in the Vercel settings.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vz864f9fwxdshd317sw.png)

Remember that you can use environment variables for many different purposes; this was just one example. I hope it has been helpful.