Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/lucavallini/aibar-frontend/llms.txt

Use this file to discover all available pages before exploring further.

Angular’s environment file system lets you define build-time constants — such as the backend API URL — that are baked into the compiled bundle. Aibar SRL App uses two environment files under src/environments/: one for local development that points at a locally running FastAPI server, and one for production that targets the hosted backend on Render. Choosing the right file before you build ensures every service in the app talks to the correct API without any runtime configuration.

​
Environment Files

The two environment files live at:
  • src/environments/environment.ts — used for ng serve and development builds
  • src/environments/environments.prod.ts — used for production builds
export const environment = {
  production: false,
  apiUrl: 'http://127.0.0.1:8000'
};
Both files export an identical environment object shape. Every Angular service imports from ../../../environments/environment — the same relative path — which means switching backends only requires changing the value in the appropriate file, not touching any service code.

​
Development Environment

The development environment file (src/environments/environment.ts) is the default used by ng serve and by any build that runs with the development configuration. It sets production: false and points apiUrl at http://127.0.0.1:8000, which is the address where the Aibar FastAPI backend listens when started locally. 
export const environment = {
  production: false,
  apiUrl: 'http://127.0.0.1:8000'
};
When you run ng serve, Angular compiles src/main.ts using tsconfig.app.json with src/environments/environment.ts in scope. No manual selection is required — this file is always active during local development.

​
Production Environment

The production environment file (src/environments/environments.prod.ts) sets production: true and points apiUrl at the hosted backend on Render: https://aibar-api.onrender.com. 
export const environment = {
  production: true,
  apiUrl: 'https://aibar-api.onrender.com'
};
The angular.json production build configuration does not yet include a fileReplacements entry to automatically swap environment.ts for environments.prod.ts. Before deploying, you must add the fileReplacements block to the production configuration in angular.json so the build system substitutes the correct file automatically:
"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environments.prod.ts"
      }
    ]
  }
}
Without this, ng build will still compile the app but will bundle the development apiUrl (http://127.0.0.1:8000) into the production artifact.

​
Where apiUrl Is Used

Every Angular service that communicates with the backend imports environment and reads environment.apiUrl as the base URL for its HTTP calls. Here is a representative example from ViajesService: 
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../../../environments/environment';
import { Viaje, ViajeCreate } from '../models/viaje.model';
import { RespuestaPaginada } from '../models/paginacion.model';

@Injectable({ providedIn: 'root' })
export class ViajesService {
  private apiUrl = `${environment.apiUrl}/viajes`;

  constructor(private http: HttpClient) {}

  listar(estado?: string, pagina: number = 1, tamanoPagina: number = 20): Observable<RespuestaPaginada<Viaje>> {
    const filtroEstado = estado ? `&estado=${estado}` : '';
    return this.http.get<RespuestaPaginada<Viaje>>(
      `${this.apiUrl}/?pagina=${pagina}&tamano_pagina=${tamanoPagina}${filtroEstado}`
    );
  }
  // ...
}
The pattern private apiUrl = \$/viajes`is repeated across all core services —CamionesService, ChoferesService, CombustibleService, MultasService, AuditoriaService, UsuariosService, and AuthService. Updating environment.apiUrl` in one place redirects the entire application.

​
Changing the Backend URL

To point the frontend at a different backend — for example, a staging server or a colleague’s local machine — follow these steps:
1

Open the correct environment file

  • For local development (ng serve): edit src/environments/environment.ts
  • For production builds (ng build): edit src/environments/environments.prod.ts
2

Update the apiUrl value

Replace the existing apiUrl string with the new backend base URL. Do not include a trailing slash:
export const environment = {
  production: false,
  apiUrl: 'http://192.168.1.42:8000'   // ← colleague's local machine, for example
};
3

Restart the dev server

Environment files are compiled into the bundle at startup. If ng serve is already running, stop it (Ctrl+C) and restart it so the new URL is picked up:
ng serve
4

Verify the backend is reachable

Open your browser’s DevTools → Network tab, log in, and confirm that API requests are going to the new URL and returning 200 responses. If you see CORS errors, see the CORS section below.
Never commit real production secrets — API keys, JWT secrets, database credentials — inside environment files or any file tracked by git. The apiUrl values shown here are public-facing URLs and are safe to commit, but any sensitive configuration (such as SUPABASE_SERVICE_KEY or JWT_SECRET on the backend) must be stored in environment variables or a .env file that is listed in .gitignore and never pushed to the repository.

​
CORS

Because the frontend runs on a different origin than the backend (e.g., http://localhost:4200 vs. http://127.0.0.1:8000), the FastAPI backend must include the frontend’s origin in its CORS allow-list. When the frontend URL changes — such as after deploying to a Vercel domain — update the allow_origins (or equivalent) list in the backend’s app/main.py to include the new origin. Without this, the browser will block all cross-origin requests and the app will not be able to communicate with the API. 
# Example backend CORS configuration (app/main.py)
app.add_middleware(
    CORSMiddleware,
    allow_origins=[
        "http://localhost:4200",        # local development
        "https://your-app.vercel.app",  # production frontend URL
    ],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)
After updating the backend’s CORS configuration, redeploy the backend and verify that preflight (OPTIONS) requests from the new frontend origin return the correct Access-Control-Allow-Origin header.

Build docs developers (and LLMs) love

Get started for freeTalk to us