Skip to main content

​
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',
};

​
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

1

Development Build

Build with development configuration:
ng build
2

Production Build (Docker)

Build with production configuration:
ng build --configuration production
3

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

1

Update Environment Files

Add the new variable to all environment files:
export const environment = {
  production: false,
  apiUrl: 'http://localhost:8080',
  newVariable: 'value'
};
2

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:
EnvironmentAPI URLUse Case
Developmenthttp://localhost:8080Local development
Productionhttp://biblioteca-backend:8080Docker deployment
Netlifyhttps://biblioteca-virtual-backend-44v7.onrender.comCloud 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

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

​
Troubleshooting

​
Wrong API URL

If the application connects to the wrong backend:
  1. Check the build configuration used
  2. Verify the correct environment file is being used
  3. 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

Build docs developers (and LLMs) love

Get started for freeTalk to us