How to use environment variables in Vite

The Vite.js frontend build tool makes use of .env files at the root of your project in which you may define your environment variables.

Once you make a production build, Vite statically replaces the references to your environment variables by their values.

Compared to other build systems there are two points you need to take into account when referencing your environment variables.

First, you can access your environment via import.meta.env. This returns an object containing the available environment variables known to Vite. In other build systems or JavaScript code bases you may be used to access your env variables via process.env.

Using process.env in Vite may yield the error: "ReferenceError: process is not defined".

Secondly, the user defined environment variables are prefixed with VITE_. Or another string if you overwrite the default envPrefix config option.

Thus, given you have the following .env file.

API_BASE_URL=https://api.example.com

You can reference the defined environment variable in your code using the following.

const baseUrl = import.meta.env.VITE_API_BASE_URL