Managing Builds and HTML files for Different Environment in Angular

05 February 2021

In my last projects, we always had the same requirement: Build the application once and deploy the same build fragment to multiple environments. This leads to some technical challenges, as we need to be able to inject environment-specific information to our application during runtime.

In this article, I want to propose some solutions to solve this problem.

Build once — deploy everywhere

Most software projects are done in an agile way so we often use Continuous Delivery. The idea is to deliver releases in short cycles by an automated software release process. This process is realized by building a corresponding pipeline that typically checks out the code, installs dependencies, runs tests and builds a production bundle.

This build artifact is then passed through multiple stages where it can be tested. Followed is an exemplary stage setup:

• DEV: development environment which is mainly used by developers. A new deployment is automatically triggered by pushing a commit to develop a branch.
• TEST: test environment which is mostly used for automated tests and user tests. A new deployment is automatically triggered by pushing a commit to master branch
• STAGING: this environment should be as similar as possible as the PROD environment. It is used for final acceptance tests before a PROD deployment of the build artifact is manually triggered.
• PROD: the “final” environment which is used by the customers, deployment is triggered manually

Why build once?

Of course, we could just rebuild our application for every environment in our pipelines. But, then there could be a chance that the build artifact on TEST is not the same as the one used in PROD. Unfortunately, a build process is not deterministic even if it is done in an automated pipeline as it depends on other libraries, different environments, operating systems, and environment variables.

The Challenge

Building only one bundle is quite easy but it leads to one big challenge we need to consider: How can we pass environment-specific variables to our application?

Angular CLI provides environment files (like environment.ts) but these are only used at build time and cannot be modified at runtime. A typical use-case is to pass API URLs for each stage to the application so that the frontend can talk to the correct backend per environment. This information needs to be injected into our bundle per deployment in our environments.

Backend services can read environment variables but unfortunately, the frontend runs in a browser and there exists no solution to access environment variables. So we need to implement custom solutions that I want to present to you in the next chapters. Also, In our project we have different html files and those files are also environment specific.

How we can solve our Problem?

In angular project we have a *angular.json* file there is an *configurations* key where you can find the *fileReplcemanes* option. Now, what file replacement done it can replace your other environment specific *environment.ts* file to our *environment.ts* file. You can add the same configuration for your dev, test, prod.

Now, if you have html files in your project and you wanted to add those html files according to the environment then you can also do it. You need to add all the html files in our projects main folder means *src* folder and make different folders according to the environments. All the files files we added on our main folder are treated as an assets so now we need to replace asserts like our environment file. On file *angular.json* we have an *architect*->build->option->assets key where you can add assets to your project. Now like your environment file we can replace those files by adding environment specific html folder path there it will automatically replace your assets on the files you added in the environment specific folder.

Commend to build application

Last important thing is to build our application according to the different environment by its name. We need to use a commane ng build –configuration <environment name>. From this we will be able to create builds according to the different environment.

Serve our application according to the different environment

When we wanted to test build and run all the application locally according to the different environment we have to add environment specific configuration on the *serve* key.

In serving you need to add browerTarget according to your different environment.

🔊 Listen