How to Configure Vite for Different Environments?

Vite is a modern build tool that puts the developer experience at its core, allowing you to have a fast development environment using a bare minimum of setup. It supports front-end frameworks like React, Vue, and Svelte. Configuring Vite for different environments is essential in managing API endpoints, feature flags, and environment-specific variables for development, testing, and production builds.

Prerequisites

• HTML
• CSS
• JavaScript
• React

These are the approaches to configure Vite for Different Environments:

Steps to Create an Application

Step 1: Install Vite

Select React as a Framework and JavaScript as a variant.

npm create vite@latest my-vite-app
cd my-vite-app

Step 2: Install Dependencies

npm install vite @vitejs/plugin-react

Folder Structure:

Using Environment Variables in Vite

Environment variables in Vite help you set up your app differently for various situations, like development, testing, or production. You often want your app to behave differently depending on where it's running, and environment variables help with that. Environment variables make it easy to customize your app for different situations without having to manually change the code for each environment.

Step 1: Create Environment Files

In this approach, we use .env files for different environments to store environment-specific variables. We will be making two .env files, as .env.development and .env.production. These files will store the API URL for different environments (development and production).

//MY-VITE-APP/.env.development

VITE_API_URL=http://localhost:3000/api

//MY-VITE-APP/.env.production
VITE_API_URL=https://api.production.com

Step 2: Update Your React Component

In the main React component (App.jsx), we will access the environment variables using import.meta.env. Add the below mentioned code in App.jsx.

// /MY-VITE-APP/src/App.jsx
import React from 'react';

function App() {
    // Access the environment variable VITE_API_URL
    const apiUrl = import.meta.env.VITE_API_URL;

    return (
        <div>
            <h1>Vite React App</h1>
            <p>API URL: {apiUrl}</p> {/* Display API URL */}
        </div>
    );
}

export default App;

Step 3: Vite Configuration File

No special configuration is needed in vite.config.js for environment variables to work, as Vite automatically loads .env files based on the environment (development or production). Add the below mentioned code in vite.config.js .

// /MY-VITE-APP/vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [react()],
});

Step 4: Run the App in Different Environments

To run in development mode:

npm run dev

Output:

To build and preview in production mode:

npm run build
npm run preview

Output:

Using Multiple Vite Configuration Files

In this approach, instead of environment files, we will create separate Vite configuration files for each environment. When you are building a web app, you often need to adjust how it works depending on where it is being run. For example; In development you want the app to load fast and shoe detailed error messages. In production, you care more about making it fast and efficient, without showing unnecessary details.

Step 1: Create Vite Configuration Files

We’ll create two Vite configuration files: one for development and one for production named as vite.config.dev.js and vite.config.prod.js.

// /MY-VITE-APP/vite.config.dev.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// Development configuration for Vite
export default defineConfig({
    plugins: [react()],
    define: {
        'process.env': {
            API_URL: 'http://localhost:3000/api'
        }
    }
});

// /MY-VITE-APP/vite.config.prod.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [react()],
    define: {
        'process.env': {
            API_URL: 'https://api.production.com'
        }
    }
});

Step 2: Update Your React Component

In your React component (App.jsx), we will use process.env.API_URL to get the API URL, which is defined in the Vite configuration files.

//MY-VITE-APP/src/App.jsx
import React from 'react';

function App() {
    // Access the environment variable from Vite config files
    const apiUrl = process.env.API_URL;

    return (
        <div>
            <h1>Vite React App</h1>
            <p>API URL: {apiUrl}</p> {/* Display API URL */}
        </div>
    );
}

export default App;

Step 3: Update the package.json Scripts

You need to update the package.json file to use the appropriate configuration file depending on whether you're running in development or production.

//MY-VITE-APP/package.json
{
    "name": "my-vite-app",
    "version": "0.0.1",
    "scripts": {
        "dev": "vite --config vite.config.dev.js", 
        // Use dev config for development
        "build": "vite --config vite.config.prod.js", 
        // Use prod config for production
        "serve": "vite preview"
    },
    "dependencies": {
        "react": "^18.0.0",
        "react-dom": "^18.0.0"
    }
}

Step 4: Run the App in Different Environments

To run in development mode using the vite.config.dev.js file:

npm run dev

Output:

To build and preview in production mode using the vite.config.prod.js file:

npm run build
npm run preview

Output:

Conclusion

Configuring Vite for different environments is important to maintain a variety of API endpoint URLs and feature sets for both development and production. This helps you keep either multiple Vite configuration files or, more commonly, manage environment-based settings via .env files. The .env approach is flexible and easier to maintain on large projects, while the approach with multiple configuration files is simple and clear for smaller projects. By following this guide, you will be able to seamlessly switch between environments as your project moves from development to production.