Handling Multi-Environment

Hi Friends, This is Lakshman here.

As part of the Series "Angular Best Practices".

Today, We will go through Practices to followed on Handling Multi-Environment for Angular App.

In all command, request to use Angular CLI installed in App's Dev Dependencies.

In package.json

"scripts": {
    "ng": "ng",
    ...
},
"devDependencies": {
    ...
    "@angular/cli": "~10.0.6",
    ...
  },
...

Angular Environments

As Default, The Angular creates environment.ts & environment.prod.ts files to Handle Environments.

Usual Environment variables are,

  • Production Flag.
  • API Url, etc.,

If we have more than Two Environments such as QA, UAT, we usually create environment.qa.ts & environment.uat.ts and configure variables.

The Current problems were,

  • We are needed to create each file per environment, which drives to rebuild application per environment.
  • Can't able to Change variables While App Deployment.
  • Our API Url's & Other Configuration stuck inside Code Repos.
  • Can't Implement CI/CD Pipeline very Fluent.

Things to do

We are required to build Angular Application once and Deploy with environment-specific configuration.

The things to do are,

  • Required to Remove Environment Specific variables outside source.
  • Handle as Environment on JSON Files instead of environment.{env}.ts File.

How to do it,

It has a various approach for handling multi-environment,

My Approach,

In Any Terminal:

First Create an App Config Service as below,

npm run ng generate service appConfig

The Purpose of the Service is fetching JSON file located in the assets folder and update the Environment variables.

With this option, we can change the JSON file after deployment.

After Service created, Add to Provider with APP_INITIALIZER as below

  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initConfig,
      deps: [ AppConfigService ],
      multi: true
    }
  ]

Check out the App Config Service Code in here

Check out the App Module Code in here

Benefits,

  • Build Only your Angular App.
  • Can Change Environment on Deploy.
  • Save Our Time in Build.

If you want to know by Video Check this 12 Factor App in Angular

To Generate the JSON File via NPM Package @lazh/Config Check this Out Here

You may also access to updated source on GitHub by Click Here

On-road head, we will discuss a lot of things.

Looking forward to your comments and share your feedback.

Until that, I am Lakshman, Signing Off.

Comments

Post a Comment

Popular posts from this blog

Model Mapper in Angular

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will Model Mapper in Angular . Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here VS Code - Click Here Model Mapper It's a concept build based on AutoMapper from C#. While integrating with API, When we were required to map property. The Model Mapper requires Two things to do, ModelMapper Class PropertyMap Function. The ModelMapper class file as below, export class ModelMapper<T> { _propertyMapping: any; _target: any; constructor(type: { new(): T }) { this._target = new type(); this._propertyMapping = this._target.constructor._propertyMap; } map(source: any) { Object.keys(this._target).forEach((key) => { const mappedKey = this._propertyMapping[key]; if (mappedKey) { this._target[key] = source[mappedKey]; } else { this._target[key] = source[key]; } });
Read more

Implement Logging in Angular with Firebase

Hi Friends, This is Lakshman here. Welcome back to the Series Angular Best Practices Today, We will Implement Logging for your angular app . Every Application required Logging irresptive of Application. Its either Front-End or Back-End. For Back-End, we have lots of packages and SDK available for such as Serilog, Log4Net for .NET Core, Framework. However, In Front-End we need to Store your Logs somewhere in NoSQL Database where we can query the logs. Today we are going to use FireBase Cloud Database to Store our logging. As its Client-side SDK. Our other options are Application Insights (Microsoft Azure) JSLog with Seq. etc., Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here FireBase Account with Cloud Database - Click Here For Code Editor its VS Code. Implementation: We will go there the Implementation by Steps, Step 1: Create the Cloud FireBase Database - Click Here Step 2: Add Web Client for Project via Steps Step 3: Copy th
Read more

Dockerize Angular App for Dev

Hi Friends, This is Lakshman here. Welcome back to the Series Angular Best Practices Today, We will Dockerize your angular app for Development . Now as days, we develop application with multiple developers. Each one have there own Node.JS Environment. To Solve this issue we can containerize your application to run inside Docker. Pre-requisites: The pre-requisites are Install Docker - Click Here Node.JS - Click Here Angular CLI - Click Here Once Install Docker & Node.JS install Angular CLI via NPM Package Manager. Implementation: On your Existing Angular Application, Create a File Called Dockerfile.Dev Dev indicates for Development Docker File. Inside that Dockerfile.Dev, Copy the below code # Create a new image from the base nodejs 12.7 image. FROM node:12.7-alpine # Create the target directory in the image RUN mkdir -p /usr/src/app # Set the created directory as the working directory WORKDIR /usr/src/app # Copy the package.json inside the working directory COPY
Read more