1.0.12 β€’ Published 11 months ago

@spacier/dynamic-env v1.0.12

Weekly downloads
-
License
-
Repository
-
Last release
11 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

11 months ago

1.0.11

11 months ago

1.0.10

11 months ago

1.0.8

11 months ago

1.0.7

11 months ago

1.0.6

11 months ago

1.0.5

11 months ago

1.0.4

11 months ago

1.0.3

11 months ago

1.0.2

11 months ago

1.0.1

11 months ago

1.0.0

11 months ago