switch-env

A lightweight environment-based API configuration switcher for frontend apps (Vite, Vue, React, etc).

Helps you manage different API URLs for development, staging, and production environments with a clean and simple API.

Installation

npm install frontend-env-switcher

Basic Usage

import { createEnvConfig } from "frontend-env-switcher";

const config = createEnvConfig({
  api: {
    development: "http://localhost:3000",
    staging: "https://test-api.example.com",
    production: "https://api.example.com"
  }
});

console.log(config.get("api"));

Using with Axios

import axios from "axios";
import { createEnvConfig, createAxiosClients } from "frontend-env-switcher";

const config = createEnvConfig({
  api: {
    development: "http://localhost:3000",
    production: "https://api.example.com"
  }
});

const clients = createAxiosClients(axios, config);

export const apiClient = clients.api;

Multiple Services Example

const config = createEnvConfig({
  auth: {
    development: "http://localhost:3001",
    production: "https://auth.example.com"
  },
  api: {
    development: "http://localhost:3000",
    production: "https://api.example.com"
  }
});

Options

| Option | Description | |--------|-------------| | env | Force environment manually | | debug | Enable console logs |

Example:

createEnvConfig(config, {
  env: "staging",
  debug: true
});

How Environment Is Detected

The package detects environment automatically from:

1. import.meta.env.MODE (Vite)
2. process.env.NODE_ENV
3. Defaults to "development"

Why Use This?

Frontend apps often need:

• Different APIs for dev, test, and production
• Multiple backend services
• Clean and reusable configuration

This package simplifies that workflow.

License

MIT