How To Setup Multiple Environments For Angular Applications

By Ā· Angular Ā· Tags:

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

Share

Related posts

No comments

Leave a comment

ā†‘