1.0.12 β’ Published 5 months ago
@spacier/dynamic-env v1.0.12
@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