1.0.12 β€’ Published 5 months ago

@spacier/dynamic-env v1.0.12

Weekly downloads
-
License
-
Repository
-
Last release
5 months ago

@spacier/dynamic-env

A lightweight utility for managing environment variables in applications, with special support for Vite ( meaning not limited to react ) and Create React App.

Features

  • πŸš€ Runtime environment variable injection
  • πŸ”„ Support for both Vite and Create React App
  • πŸ› οΈ Simple CLI interface
  • πŸ”’ Type-safe environment variables
  • πŸ“¦ Zero runtime dependencies

Installation

npm install @spacier/dynamic-env
# or
yarn add @spacier/dynamic-env
# or
pnpm add @spacier/dynamic-env

Usage

1. Set up environment variables

Create a .env file in your project root:

VITE_API_URL="https://api.example.com"
REACT_APP_API_KEY="your-api-key"

2. Configure your application

Add the environment script to your HTML file:

<!DOCTYPE html>
<html>
  <head>
    <script src="/env.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

3. Create a type-safe environment configuration

// env.ts
declare global {
  interface Window {
    env: ImportMetaEnv;
  }
}

interface ImportMetaEnv {
  VITE_API_URL: string;
  REACT_APP_API_KEY: string;
  [key: string]: string;
}

export const env = {
  ...import.meta.env,
  ...window.env,
} as ImportMetaEnv;

export default env;

4. Use environment variables

import { env } from './env';

function App() {
  return (
    <div>
      <p>API URL: {env.VITE_API_URL}</p>
    </div>
  );
}

CLI Commands

Set Environment Variables

Inject environment variables into your build:

npx dynamic-env set --dir dist
VITE_COLOR=red npx dynamic-env set --dir dist --name env.js

Options:

  • --dir, -d: Build directory path (default: "./build")
  • --name, -n: Output filename (default: "env.js")
  • --var, -v: Variable name in window object (default: "env")

Build with Environment Variables

Build your application with environment variable placeholders:

npx dynamic-env build "npm run build"

Options:

  • --dotenv: Enable .env file support (default: true)
  • --bypass: Skip environment variable injection

TypeScript Support

The library includes built-in TypeScript declarations. No additional setup required.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT

Author

Admir Saheta

1.0.12

5 months ago

1.0.11

5 months ago

1.0.10

5 months ago

1.0.8

5 months ago

1.0.7

5 months ago

1.0.6

5 months ago

1.0.5

5 months ago

1.0.4

5 months ago

1.0.3

5 months ago

1.0.2

5 months ago

1.0.1

5 months ago

1.0.0

5 months ago