Environment Configuration Setup

This project uses a hybrid approach for environment configuration:

Base configuration (production/stage flags) are in static TypeScript files
Secrets and dynamic values are loaded from .env files and converted to TypeScript constants

Overview

Static Environment Files

src/environments/environment.ts - Development configuration
src/environments/environment.prod.ts - Production configuration
src/environments/environment.stage.ts - Staging configuration

These files contain base configuration like production, stage, and version flags.

Dynamic Environment Variables

.env - Environment variables for all environments
src/app/config/env.generated.ts - Auto-generated TypeScript constants (gitignored)

The .env file contains secrets and environment-specific values that should not be committed to version control.

Setup Instructions

Create your .env file
```
cp .env.example .env
```

Add your environment variables

# .env
GOOGLE_DRIVE_TOKEN=your-token-here
DROPBOX_API_KEY=your-api-key-here

Access environment variables in your code

// Import from the generated constants (type-safe!)
import { ENV } from './app/config/env.generated';

// Direct access
const googleToken = ENV.GOOGLE_DRIVE_TOKEN;

// Or using utility functions (with type safety)
import { getEnv, getEnvOrDefault } from './app/util/env';

const googleToken = getEnv('GOOGLE_DRIVE_TOKEN');
const dropboxKey = getEnvOrDefault('DROPBOX_API_KEY', 'default-key');

Running the Application

The npm scripts automatically generate TypeScript constants from .env before running:

# Development
npm run startFrontend

# Production configuration
npm run startFrontend:prod

# Staging configuration
npm run startFrontend:stage

Note: All commands use the same .env file. The difference between environments is controlled by the Angular configuration (production/stage flags).

Build Commands

Build commands also generate constants before building:

# Production build
npm run buildFrontend:prod:es6

# Staging build
npm run buildFrontend:stage:es6

How It Works

load-env.js reads the .env file and generates src/app/config/env.generated.ts
TypeScript constants are imported and used throughout the app (no process.env needed!)
Type safety - The utility functions use keyof typeof ENV for autocomplete and type checking
Gitignored - The generated file is never committed, keeping secrets safe

Security Notes

Never commit .env files to version control
The generated env.generated.ts is gitignored automatically
Secrets are compiled into the bundle at build time (not exposed as environment variables)
Only add non-sensitive values to .env.example

Adding New Environment Variables

Add to .env:
```
NEW_API_KEY=your-api-key-here
```
The TypeScript types are automatically generated when you run any build/serve command

Use in your code with full type safety:

import { ENV } from './app/config/env.generated';
const apiKey = ENV.NEW_API_KEY;

// Or with utility function
import { getEnv } from './app/util/env';
const apiKey = getEnv('NEW_API_KEY'); // TypeScript knows all available keys!

Benefits of This Approach

✅ Type Safety: Full TypeScript support with autocomplete
✅ No Runtime Dependencies: Constants are compiled into the bundle
✅ Works Everywhere: No need for process.env or special webpack config
✅ Simple: Just import and use the constants
✅ Secure: Secrets stay in .env and never in version control

3.7 KiB Raw Blame History