How to Configure Angular Environment Variables for Staging and Production

Post author:Chinna
Post published:April 4, 2021
Post category:Angular
Post comments:0 Comments

0 Shares

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.

Table of Contents

Configure Environment Variables

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

src/environments/environment.ts

// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// 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 environment.prod.ts for the production environment

src/environments/environment.prod.ts

export const environment = {
  production: true,
  apiBaseUrl: 'https://server.javachinna.xyz/',
  clientUrl: '?redirect_uri=https://client.javachinna.xyz/login'
};

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:

src\app\common\app.constants.ts

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;
}