How To Setup Multiple Environments For Angular Applications

Introduction

Here I am going to tell you how to setup multiple environments for Angular applications. Multiple environments are required for your Angular application when you want to ensure the stability and integrity of the application when it goes live on the production environment where your application’s end users access it.

Your application’s development workspace should be different from your production environment because you are not going to change or build anything in the production environment. Similarly, other environments, such as SIT (System Integration Testing) and UAT (User Acceptance Testing) should be separated from your development environment.

SIT environment is basically used to test your feature with different systems integrated with your application.

The UAT environment is used by the application’s main/end users or clients to test the features before pushed to the production environment. This environment is almost like production environment because it is required to get the sign off before the application code is pushed to the production environment.

You can search online details about different environments, so let’s, jump how to implement it in Angular application.

Prerequisites

Angular 10.2.5/13.0.1, Node 16.12.0, Npm 8.1.0

Project Setup

Create a new angular project. The name of the project I am creating for this example is angular-multiple-environments-setup.

Create Separate Environment Files

I am going to create separate file for each of the environment. I am going to create four different environments, such as, dev, sit, uat and prod. The environment TypeScript files are created under src/environments folder. The content I am showing in this tutorial is just for the example purpose and is not used in this example.

The environment.ts file is used mainly for the development environment and contains the following content:

export const environment = {
  production: false,
  clientId: '0oa3216uj9nKywGF10h4',
  loginUrl: 'https://okta.com/oauth2/v1/authorize',
  tokenUrl: 'https://okta.com/oauth2/v1/token',
  callbackUrl: 'http://localhost:4200/'
};

The prod environment file environment.prod.ts contains the following content:

export const environment = {
  production: true,
  clientId: '8fa5816uj4nKywSD10h8',
  loginUrl: 'https://okta.com/oauth2/v1/authorize',
  tokenUrl: 'https://okta.com/oauth2/v1/token',
  callbackUrl: 'https://prodenv.com/'
};

The environment.sit.ts file is used for sit environment:

export const environment = {
  production: true,
  clientId: '4oa1216uj8nFywHG10h8',
  loginUrl: 'https://okta.com/oauth2/v1/authorize',
  tokenUrl: 'https://okta.com/oauth2/v1/token',
  callbackUrl: 'https://sitenv.com/',
};

Similarly, the for the uat environment (environment.uat.ts):

export const environment = {
  production: true,
  clientId: '2oa3216uj8nKywGF10h6',
  loginUrl: 'https://okta.com/oauth2/v1/authorize',
  tokenUrl: 'https://okta.com/oauth2/v1/token',
  callbackUrl: 'https://uatenv.com/',
};

Title of the Application

Update the title of the page. Edit the file src/index.html and update as follows:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular Multiple Environments Setup</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Update angular.json

You will find angular.json file under the project root folder. Open it and find for the configurations option under build option. For example, look at the following code snippets in angular.json file:

{
  ...
  "projects": {
    "angular-multiple-environments-setup": {
      ...
      "architect": {
        "build": {
		  ...
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
           },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
		  },
          "defaultConfiguration": "production"
        },
        ...
      }
    }
  },
  "defaultProject": "angular-multiple-environments-setup"
}

You will also notice that the default configuration for the build option is production environment. So, when you execute the command ng build then your application will produce the dist folder for production environment.

Therefore, for additional environments you need to add build options for other environments under the configurations option. So, after adding for sit and uat environments, your configurations option will look like the following code:

{
  ...
  "projects": {
    "angular-multiple-environments-setup": {
      ...
      "architect": {
        "build": {
		  ...
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            },
		    "sit": {
			 "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.sit.ts"
                }
              ],
			  "buildOptimizer": true,
              "optimization": true,
              "vendorChunk": false,
              "extractLicenses": true,
              "sourceMap": false,
              "namedChunks": false,
              "outputHashing": "all"
			},
			"uat": {
			 "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.uat.ts"
                }
              ],
              "buildOptimizer": true,
              "optimization": true,
              "vendorChunk": false,
              "extractLicenses": true,
              "sourceMap": false,
              "namedChunks": false,
              "outputHashing": "all"
		    }
		  },
          "defaultConfiguration": "production"
        },
        ...
      }
    }
  },
  "defaultProject": "angular-multiple-environments-setup"
}

So I have configured for sit with tag name sit and uat with tag name uat.

Similarly, for the serve option you need to add for sit and uat environments. In the above angular.json file, the serve option looks to the similar content:

{
  ...
  "projects": {
    "angular-multiple-environments-setup": {
      ...
      "architect": {
        "build": {
          ...
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "angular-multiple-environments-setup:build:production"
            },
            "development": {
              "browserTarget": "angular-multiple-environments-setup:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        ...
      }
    }
  },
  "defaultProject": "angular-multiple-environments-setup"
}

Notice that the serve option is configured with development environment by default.

After adding for sit and uat environments, your serve option will look like the following content:

{
  ...
  "projects": {
    "angular-multiple-environments-setup": {
      ...
      "architect": {
        "build": {
          ...
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "angular-multiple-environments-setup:build:production"
            },
            "development": {
              "browserTarget": "angular-multiple-environments-setup:build:development"
            },
                                           "sit": {
              "browserTarget": "angular-multiple-environments-setup:build:sit"
            },
                                           "uat": {
              "browserTarget": "angular-multiple-environments-setup:build:uat"
            }
          },
          "defaultConfiguration": "development"
        },
        ...
      }
    }
  },
  "defaultProject": "angular-multiple-environments-setup"
}

So, I have added build for sit with build tag name sit (build:sit) and uat with build tag name uat (build:uat).

Update package.json

Now update the package.json file for the build section as given below:

{
  "name": "angular-multiple-environments-setup",
  ...
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
	"buildsit": "ng build --configuration=sit",
	"builduat": "ng build --configuration=uat",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  ...
}

For production, ng build is default. For sit and uat environments, I have added in the package.json under scripts option. For development, you don’t need it because you are going to test it directly.

Build App

To build the Angular app, you need to execute the following commands:

For prod: ng build

For sit: ng build --configuration=sit

For uat: ng build --configuration=uat

The final application is generated in the dist folder.

Serve App

To serve application in the browser, use the following commands:

For development: ng serve

For sit: ng serve --configuration=sit

For uat: ng serve --configuration=uat

You can directly open the application URL in the browser or you can use the -o or -open option in the serve command itself to open the app automatically.

Source Code

Download

Roy Tutorials