How to Configure Angular Environment Variables for Staging and Production

In the previous article, we have deployed our Multi Container Docker application on Ubuntu Server in a Digital Ocean Droplet. Before deploying, we had to change the client and server URL’s from localhost to the actual VPS IP in the angular-11-social-login\src\app\common\app.constants.ts file.

If we have to deploy this application to another environment, then we need to change the IP again. So this is not a good solution. Instead, we are gonna configure the URL’s in the src/environments/ files

The src/environments/ folder contains the base configuration file, environment.ts, which provides a default environment. We can add override defaults for additional environments, such as production and staging, in target-specific configuration files.

Configure Environment Variables

Let us change the default environment.ts to add the localhost URL’s to test the application in our local environment


// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with ``.
// The list of file replacements can be found in `angular.json`.

export const environment = {
  production: false,
  apiBaseUrl: 'http://localhost:8080/',
  clientUrl: '?redirect_uri=http://localhost:8081/login'

Now we are gonna configure the URL’s in the for the production environment


export const environment = {
  production: true,
  apiBaseUrl: '',
  clientUrl: '?redirect_uri='

To add a staging environment, create a copy of src/environments/environment.ts called src/environments/environment.staging.ts, then add a staging configuration to angular.json:

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

Import Environment Files

To use the environment configurations we have defined, we need to import the environments file in our AppConstants class:


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

export class AppConstants {
    private static API_BASE_URL = environment.apiBaseUrl;
    private static OAUTH2_URL = AppConstants.API_BASE_URL + "oauth2/authorization/";
    private static REDIRECT_URL = environment.clientUrl;
    public static API_URL = AppConstants.API_BASE_URL + "api/";
    public static AUTH_API = AppConstants.API_URL + "auth/";
    public static GOOGLE_AUTH_URL = AppConstants.OAUTH2_URL + "google" + AppConstants.REDIRECT_URL;
    public static FACEBOOK_AUTH_URL = AppConstants.OAUTH2_URL + "facebook" + AppConstants.REDIRECT_URL;
    public static GITHUB_AUTH_URL = AppConstants.OAUTH2_URL + "github" + AppConstants.REDIRECT_URL;
    public static LINKEDIN_AUTH_URL = AppConstants.OAUTH2_URL + "linkedin" + AppConstants.REDIRECT_URL;

Build the Angular App For Production

ng build --prod or ng build --configuration=production

Run the Angular App

You can run this App with the below command and hit the URL http://localhost:8081/ in your local machine.

ng serve --port 8081

To test if the production variables are picked correctly, we can specify the --prod option while running locally.

ng serve --port 8081 --prod


Source Code


That’s all folks. In this article, we have configured enviroment based variables for our Angular application.

Thank you for reading.

Leave a Reply