How to Load environment variables from .env file using Vite?

The environment variables in the application are managed through .env files in a Vite project, allowing you to configure and access various settings dynamically. By prefixing variables with VITE_, Vite exposes them to your application’s runtime environment. This approach facilitates different configurations for development, production, or testing environments without hardcoding values directly into your code.

Prerequisites

• Nodejs
• React

Approach

In Vite, environment variables are loaded from a .env file by defining them with a VITE_ prefix. These variables are then accessible in your React application via import.meta.env. This method allows seamless integration of environment-specific configurations, ensuring that your application is adaptable to different environments.

Steps to load environment variables from .env file using Vite

Step 1: Install Node.js, If you haven’t installed NodeJs, download it from the official website.

Step 2: Create a new Vite Project

npm create vite@latest my-react-app-env --template

Step 3: Select a framework: select the React framework here using the downward arrow key.

Vanilla
Vue
React
Preact
Lit
Svelte
Solid
Qwik
Others

Step 4: Select Variant: choose any variant of your choice using the downward arrow key,i.e: choose JavaScript

TypeScript
TypeScript + SWC
JavaScript
JavaScript + SWC

Step 5: Now, switch to my-react-app-env directory

cd my-react-app-env

Step 6: Install Dependencies

npm install

Dependencies:

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

Step 7: Start Server using below command, make sure check your port no on the terminal it may be different for you system.

npm run dev
  ➜  Local:   http://localhost:5173/

Project Structure:

Example: We are using Vite's import.meta.env to load environment variables from the .env file in a React application. In App.jsx, import.meta.env.VITE_API_URL and import.meta.env.VITE_APP_NAME are used to access the VITE_API_URL and VITE_APP_NAME variables, respectively. These values are then displayed in the component, specifying how to integrate environment variables into the React app.

// App.jsx

import React from 'react';

function App() {
    // Accessing environment variables
    const apiUrl = import.meta.env.VITE_API_URL;
    const appName = import.meta.env.VITE_APP_NAME;

    return (
        <div>
            <h1 style={{ color: 'green' }}>GeeksforGeeks</h1>
            <h3>Load environment variables from .env file using Vite</h3>
            <p>API URL: {apiUrl}</p>
            <p>App Name: {appName}</p>
        </div>
    );
}

export default App;

//.env
VITE_API_URL=https://geeksforgeeks.org/api
VITE_APP_NAME=MyViteApp

Output:

Conclusion

By using the VITE prefix in environment variables you can easily load your Vite-powered React applications. This approach simplifies the management of environment-specific configurations, enhancing the flexibility and maintainability of your code.