https://github.com/admirsaheta/dynamic-env
Manage your environment variables directly from runtime
https://github.com/admirsaheta/dynamic-env
environment javascript typescript vite web
Last synced: 2 months ago
JSON representation
Manage your environment variables directly from runtime
- Host: GitHub
- URL: https://github.com/admirsaheta/dynamic-env
- Owner: admirsaheta
- Created: 2025-01-27T18:00:26.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-01-28T13:33:20.000Z (over 1 year ago)
- Last Synced: 2025-04-10T13:27:20.446Z (about 1 year ago)
- Topics: environment, javascript, typescript, vite, web
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@spacier/dynamic-env
- Size: 476 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @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
```bash
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:
```env
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:
```html
```
### 3. Create a type-safe environment configuration
```typescript
// 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
```typescript
import { env } from './env';
function App() {
return (
API URL: {env.VITE_API_URL}
);
}
```
## CLI Commands
### Set Environment Variables
Inject environment variables into your build:
```bash
npx dynamic-env set --dir dist
```
```bash
ο²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:
```bash
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