Angular — build once, deploy everywhere

Introduction

The delivery of an Angular project goes through several environments before landing in production. these are generally :

• DEV : development environment mainly used by developers.
• INTEGRATION : environment used mainly for customer acceptance.
• PREPROD : environment similar to PROD, used to do the final acceptance tests.
• PROD : the “final” environment used by customers.

Angular CLI provides environment files like environment.ts, environment.integration.ts … which are used to externalize environment variables. The disadvantage of these files is that they are used at build time of the Angular application. This requires redoing the build for each environment and therefore there is a chance that the deliverable will not be the same. Similarly, the modification of parameters such as session timeout, scrolling time of a carousel, etc. requires redelivery.

Get Anass Guendef’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Solution : build once, deploy everywhere

In this solution we will provide the configuration of the environment with a config.json file deployed with the application under the assets folder for example and which is loaded via a REST call.

In this way, we kill two birds with one stone:

• The configuration file is outsourced, which allows us to deliver a single package on all environments.
• The file is loaded via a REST call, which allows hot reload of the variables. (only a ctrl + F5 is needed to clear the browser cache).

Remark :

On the diagram, it is visible that the deliverable on the dev environment is different from that of the others. The only difference is at the value of the “production” variable which is equal to “false” on the dev environment. That makes it possible to activate the double check of changes on the models loaded in the view and makes it possible to detect bugs in the code.

This Angular feature can be detrimental to performance, hence the need to disable it on other environments.

Implementing the solution