Ne codez jamais l'adresse de votre API en dur dans votre code client. Apprenez à basculer dynamiquement entre http://localhost:3000/api en développement et https://api.learnweb.com en production grâce aux variables d'environnement Angular, Vite ou Next.js.
Bannissez const API = 'http://localhost:3000' des fichiers TypeScript/JavaScript.
Remplacement automatique des fichiers de configuration lors de la compilation --configuration=production.
Injection de variables préfixées par VITE_ lues au build par import.meta.env.
L'approche idéale en même serveur permettant de s'affranchir de toute URL absolue.
// 1. Fichier de développement : src/environments/environment.development.ts
export const environment = {
production: false,
apiUrl: 'http://localhost:3000/api/v1',
enableDebugLogs: true
};
// 2. Fichier de production : src/environments/environment.ts (ou prod)
export const environment = {
production: true,
apiUrl: 'https://api.learnweb.com/api/v1',
enableDebugLogs: false
};
// 3. Utilisation propre dans votre Service HTTP Angular :
import { inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../environments/environment';
@Injectable({ providedIn: 'root' })
export class ProductService {
private http = inject(HttpClient);
private baseUrl = environment.apiUrl;
getProducts() {
return this.http.get(`${this.baseUrl}/products`);
}
}angular.json : Lorsque vous exécutez ng build --configuration=production, Angular remplace automatiquement le fichier environment.ts par environment.prod.ts avant de démarrer la minification.
Ainsi, le bundle JavaScript final téléversé sur votre hébergeur ne contient plus la moindre mention de localhost !
apiUrl: '/api/v1' (sans préfixe de domaine ni de protocole). Le navigateur ajoutera automatiquement le protocole et le domaine courant (ex: https://learnweb.com/api/v1). Votre code devient universel et fonctionne sans modification sur votre machine locale, en préproduction et en production ! | Framework / Outil | Nom de la Variable | Comment la Lire dans le Code ? | Quand est-elle Injectée ? |
|---|---|---|---|
| Angular | environment.apiUrl | import { environment } from '...' | À la compilation (File Replacement ng build) |
| Vite (React / Vue) | VITE_API_URL | import.meta.env.VITE_API_URL | À la compilation (remplacement textuel statique) |
| Next.js (Client Component) | NEXT_PUBLIC_API_URL | process.env.NEXT_PUBLIC_API_URL | À la compilation et au rendu SSR |
| Create React App (Historique) | REACT_APP_API_URL | process.env.REACT_APP_API_URL | À la compilation Webpack |