How to use environment variables (Vite + Vercel)?

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:

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.

1. 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:

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.

1. 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.

1. 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.

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

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.

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

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.

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