How to Use Environment Variables in Vite?

In order to create your Vite application in different environments such as development, staging and production, you need to use environment variables. They enable you to manage confidential data like API keys or service URLs without having to code them inside your source code. By using environment variables, it is easy to change configurations depending on the environment in which the application runs; making sure that they would encounter no errors or security problems. This article will help you understand how to set up and use environment variables with Vite, including some common use cases and best practices.

These are the following approaches:

Steps to Create Vite Application

Step 1: Ensure NodeJs is installed in your machine, if not download it from the official website.

Step 2: Create a new Vite Project by using the following command:

npm create vite@latest vite-project --template

Step 3: Select the framework, choose React using the downward arrow key.

Vanilla
Vue
React
Preact
Lit
Svelte
Solid
Qwik
Others

Step 4: Select Variant, choose any one of the below variants of your choice by using the downward arrow key, here we choose JavaScript variant.

TypeScript
TypeScript + SWC
JavaScript
JavaScript + SWC

Step 5: Now, switch to vite-project directory

cd vite-project

Step 6: Install Dependencies

npm install

Package.json:

"dependencies": {
       "react": "^18.3.1",
      "react-dom": "^18.2.0"
}

Project Structure:

Step 7: Start the server by using the following command

npm run dev

Now, the Vite app is running on your local host.

 ➜  Local:   http://localhost:5173/

Approach 1: Using '.env' Files

• Vite allows loading of environment variables from .env files. These are files which contain values that you want to be available everywhere in the application.
• Make a file named .env at project root and then define variables in following syntax: VITE_SOME_KEY = some_value. The only variables exposed to the client are those that start with VITE_.

Syntax:

VITE_KEY_NAME = value

Example:

VITE_API_URL = https://api.example.com
VITE_APP_NAME = MyApp

Approach 2: Directly in the Vite Configuration FIle

• The Vite Configuration file (vite.config.js) supports direct usage of the environmental variables. This method helps to define variable specific to configuration.
• The Vite Configuration file accesses environmental variables using process.env.

Syntax:

//vite.config.js:

import { defineConfig } from 'vite';
export default defineConfig({
	define: {
    	__VARIABLE_NAME__: JSON.stringify(process.env.VARIABLE_NAME)
    }
});

Approach 3: Accessing Environment Variables in your Code

After defining environment variables and adding a prefix of VITE_, you would be able to access them right from within your code by using import.meta.env.

Syntax:

import.meta.env.VITE_KEY_NAME

Example: You can add this code to any of your file to get the respective output.

console.log(import.meta.env.VITE_API_URL);