Environment Configuration

Overview

The Biblioteca Virtual Frontend uses Angular’s environment configuration system to manage settings across different deployment environments. Each environment has its own configuration file.

Environment Files

The application includes three environment configurations:

export const environment = {
  production: false,
  apiUrl: 'http://localhost:8080',
};

export const environment = {
  production: true,
  apiUrl: 'http://biblioteca-backend:8080',
};

export const environment = {
  production: true,
  // URL pública de Render
  apiUrl: 'https://biblioteca-virtual-backend-44v7.onrender.com',
};

Environment Types

Development Environment

File: src/environments/environment.ts Used for local development with the backend running on localhost.

Production: false
API URL: http://localhost:8080

ng serve

Production Environment (Docker)

File: src/environments/environment.prod.ts Used for Docker-based deployments where frontend and backend are in the same network.

Production: true
API URL: http://biblioteca-backend:8080 (internal Docker network)

ng build --configuration production

The biblioteca-backend hostname refers to the backend service name in Docker Compose networking.

Netlify Environment

File: src/environments/environment.netlify.ts Used for Netlify deployments connecting to the backend hosted on Render.

Production: true
API URL: https://biblioteca-virtual-backend-44v7.onrender.com

ng build --configuration netlify

Building for Different Environments

Development Build

Build with development configuration:

ng build

Production Build (Docker)

Build with production configuration:

ng build --configuration production

Netlify Build

Build with Netlify configuration:

ng build --configuration netlify

Angular Configuration

The environment configurations are referenced in angular.json:

{
  "configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ]
    },
    "netlify": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.netlify.ts"
        }
      ]
    }
  }
}

Using Environment Variables

Import and use the environment configuration in your services:

import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = environment.apiUrl;

  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get(`${this.apiUrl}/api/endpoint`);
  }
}

Adding New Environment Variables

Update Environment Files

Add the new variable to all environment files:

export const environment = {
  production: false,
  apiUrl: 'http://localhost:8080',
  newVariable: 'value'
};

Use in Application

Import and use the variable:

import { environment } from '../environments/environment';

const value = environment.newVariable;

Environment-Specific Features

Production Mode

When production: true, Angular enables:

Ahead-of-Time (AOT) compilation
Production optimizations
Reduced bundle size
Disabled debugging tools

API URL Configuration

The apiUrl determines the backend endpoint:

Environment	API URL	Use Case
Development	`http://localhost:8080`	Local development
Production	`http://biblioteca-backend:8080`	Docker deployment
Netlify	`https://biblioteca-virtual-backend-44v7.onrender.com`	Cloud deployment

Ensure the API URL is correct for your deployment environment. Incorrect URLs will result in failed API requests.

Runtime Configuration

For dynamic runtime configuration, consider using:

Environment Variables in Docker

ENV API_URL=http://biblioteca-backend:8080

Configuration Service

Create a configuration service that loads settings at runtime:

@Injectable({
  providedIn: 'root'
})
export class ConfigService {
  private config: any;

  loadConfig() {
    return this.http.get('/assets/config.json')
      .pipe(tap(config => this.config = config));
  }
}

Best Practices

Never commit secrets: Keep sensitive data out of environment files
Use meaningful names: Make variable names descriptive
Document changes: Update documentation when adding variables
Validate URLs: Ensure API endpoints are accessible
Test each environment: Verify builds work for all configurations

Troubleshooting

Wrong API URL

If the application connects to the wrong backend:

Check the build configuration used
Verify the correct environment file is being used
Clear build cache: rm -rf dist/

Environment Not Loading

Ensure file replacements are configured correctly in angular.json.

CORS Errors

If you encounter CORS errors, verify:

The backend allows the frontend origin
The API URL is correctly configured
Network connectivity between services

Getting Started

Core Concepts

Features

Deployment

Overview

Environment Files

Environment Types

Development Environment

Production Environment (Docker)

Netlify Environment

Building for Different Environments

Angular Configuration

Using Environment Variables

Adding New Environment Variables

Environment-Specific Features

Production Mode

API URL Configuration

Runtime Configuration

Environment Variables in Docker

Configuration Service

Best Practices

Troubleshooting

Wrong API URL

Environment Not Loading

CORS Errors

​Overview

​Environment Files

​Environment Types

​Development Environment

​Production Environment (Docker)

​Netlify Environment

​Building for Different Environments

​Angular Configuration

​Using Environment Variables

​Adding New Environment Variables

​Environment-Specific Features

​Production Mode

​API URL Configuration

​Runtime Configuration

​Environment Variables in Docker

​Configuration Service

​Best Practices

​Troubleshooting

​Wrong API URL

​Environment Not Loading

​CORS Errors

Overview

Environment Files

Environment Types

Development Environment

Production Environment (Docker)

Netlify Environment

Building for Different Environments

Angular Configuration

Using Environment Variables

Adding New Environment Variables

Environment-Specific Features

Production Mode

API URL Configuration

Runtime Configuration

Environment Variables in Docker

Configuration Service

Best Practices

Troubleshooting

Wrong API URL

Environment Not Loading

CORS Errors