In Spring Boot, we use profiles (application-dev.yml, application-prod.yml) to manage different configurations. Similarly, in Vite, we can use environment files (.env) and a configuration file (config.ts) to manage settings for different environments.

What We’ll Cover

1. Why separate configuration files?
2. Setting up .env files for dev, UAT, and prod.
3. Using import.meta.env in Vite.
4. Creating a config.ts file for dynamic configuration.
5. Running the application with different environments.

---

1. Why Separate Configuration Files?

Each environment (development, UAT, production) may have different:

• API endpoints
• Feature flags
• Database connections
• Third-party service keys

Instead of manually changing them every time, we can set up environment-based configuration files.

---

2. Setting Up .env Files

Vite supports .env files based on the mode (--mode).

Create .env Files in the Root Directory

Vite automatically loads .env files based on the mode:

• .env.development (for local development)
• .env.uat (for User Acceptance Testing)
• .env.production (for production deployment)

.env.development

VITE_API_URL=https://dev.api.example.com
VITE_FEATURE_FLAG=true
VITE_ENV=development

.env.uat

VITE_API_URL=https://uat.api.example.com
VITE_FEATURE_FLAG=false
VITE_ENV=uat

.env.production

VITE_API_URL=https://api.example.com
VITE_FEATURE_FLAG=false
VITE_ENV=production

3. Using import.meta.env in Vite

Unlike Create React App (process.env.REACT_APP_*), Vite uses import.meta.env.

Create a configuration file (config.ts) to store environment variables.

4. Create config.ts for Centralized Config Management

Create a new file:
src/config.ts

export const config = {
  apiUrl: import.meta.env.VITE_API_URL || "https://default.api.com",
  featureFlag: import.meta.env.VITE_FEATURE_FLAG === "true",
  environment: import.meta.env.VITE_ENV || "development",
};

Why use this file?

• Centralizes environment variable access.
• Prevents direct usage of import.meta.env everywhere.
• Provides fallback values for missing env variables.

---

5. Use Config in React Components

src/App.tsx

import React from "react";
import { config } from "./config";

const App: React.FC = () => {
  return (
    <div>
      <h1>React Vite Multi-Environment Setup</h1>
      <p>API URL: {config.apiUrl}</p>
      <p>Feature Flag: {config.featureFlag ? "Enabled" : "Disabled"}</p>
      <p>Current Environment: {config.environment}</p>
    </div>
  );
};

export default App;

6. Running the Application in Different Environments

By default, Vite loads .env.development.
To specify a different environment, use --mode.

Run in Development Mode

npm run dev -- --mode development

Run in UAT Mode

npm run dev -- --mode uat

Run in Production Mode

npm run build -- --mode production
npm run preview

7. Modify package.json for Convenience

To simplify commands, modify "scripts" in package.json:

"scripts": {
  "dev": "vite --mode development",
  "uat": "vite --mode uat",
  "build": "vite build --mode production",
  "preview": "vite preview"
}

Now, you can start different environments easily:

npm run dev  # Development
npm run uat  # UAT
npm run build && npm run preview  # Production