Configure Build Environments With Angular CLI
Is the change live in production yet?
I am pretty sure this is a typical phrase that developers hear would hear and then when working with software engineering teams. Good software teams tend to create different build environments for applications they build. Having different build environments is very important as it enables developers to test applications without breaking existing versions of their application that users are using.
Typically, you commonly see 3 environments listed below.
- Development — The development version is the version of the application being worked on that is local to a particular developer. So, for example, If I am building an application like Twitter, the development environment is a place where each individual is free to add and break features at will without any consequences.
- Staging — After a developer has created a new feature or made a fix for an existing issue, they will typically send this code to the Staging environment after extensive testing and code reviews. The Staging environment is like a rehearsal for the live version of the application that our real user will use. It is an excellent practice to make the Staging environment closely resemble the live environment to capture any issues quickly.
- Production — This is the real thing, the final boss, the creme de la creme version of our application. The production environment is for actual usage. Any problems that make it to Production have a real effect on a business with serious cost and operational consequences. Issues should rarely make it to Production. Or better yet, they should NEVER make it to Production.
The issue here is, you can see that to recreate multiple environments, it can get pretty tricky quickly. We are talking, different API URLs, configuration strings, environmental variables, database connection strings and collection names etc.
Angular has an excellent solution for the problem of creating environmental variables across separate builds quickly.
The Environments Folder
Every Angular application by default has a folder called environments which you can find in the src path.
This folder comes preconfigured with 2 environments one for production and another default one for development. When we build for production in Angular, the following command is run
ng build --prod
When this command is issued, the Angular CLI will replace any content it finds in the environment.ts file with the code found in the envirnonment.prod.ts file. This means we can put our development variables inside the environment.ts file, and as long as we have the same structure in the environment.prod.ts file, we will be okay.
Creating The Staging Environment
Here is what we are going to do. We will be creating a staging environment for staging build. A good practice would be to create a file names environment.staging.ts. This is because the file name will indicate where the staging variables are located.
Next, we need to configure the build process for this new staging file. To do this, head to the angular.json file of your project. You will locate a property called projects, and under it, you should see an entry that corresponds with the name of your project. Now you should try to find a sub-property of your project called configurations which is under the build property which is in turn under the architect sub-property.
At this point, you should only have an entry for production. Now, under configurations, we are going to create a new entry for staging. We will then edit the fileReplacements property. This fileReplacements property allows us to specify an array of files we want to be replaced when a build with the specified target is triggered. In the current case, you will see from the example in the code example above that the .prod environmental variable file is being swapped in place of the environments.ts file during the production build. We will want to do very similarly for our staging setup. Before we do this, you should know you can do this for any file in your project, so feel free to use this as you wish.
Here is the code for the staging file replacement.
The only thing we needed to do is to ensure the entry name; staging matches the postfix of our environment file, which was environment.staging.ts. You are free to create as many environments as you can.
To build for staging, you run the following code
ng build — configuration staging
Roundup
All we have done so far is all you need to create a new build profile. In this post, we created a staging profile, but feel free to create profiles that may apply to you. I like this feature of angular as it makes it very easy for developers to develop build environments.
