Building an Angular 5 App in VSTS
Having the proper deployment pipeline is crucial for the success of any team working on a modern web application. While there are many different approaches and each team functions in a unique manner, the strategy that worked best for my team was using Microsoft Visual Studio Team Services (VSTS) to manage the code for our Angular 5 web app and the builds/releases. Our releases were then deployed to Microsoft Azure where our dev, test, and prod environments were hosted.
This article is the first in a two-part series that will provide a guide to set up a build for an Angular app in VSTS and configure it for release into multiple cloud environments. Let’s get started!
Creating the Build
1. After navigating to your project on VSTS, you will see a tab on the left-hand side of the screen that says, “Build and Release”. Under this tab, select “Builds.”
2. Next, click on the blue “New” icon in the upper right-hand corner to create a new build definition.
3. Choose the location of your code. For our project, we used VSTS Git, which is the first option available in the screenshot below. Other choices include GitHub, GitHub Enterprise, Subversion, Bitbucket, and external Git. Then, specify the repository and branch for the build to draw from.
4. Next, you will be asked to select a template or start with an empty process. For now, select “Empty process”, but feel free to experiment with the premade templates later.
5. The next screen will show you the blank build that was just created. Here we will add tasks to make the build happen. One key thing to note is that you can create builds with multiple phases. To add a new phase, click the ellipsis next to the word “Process.” To add a new task, we are going to click on the “+” next to “Phase 1.”
Setting up the Environments in Angular
6. Before we add tasks to our build, an important topic to consider is the use of environments in Angular. We want to have one build in VSTS that then triggers one release with a pipeline that releases to our development (dev), test, and production (prod) environments upon the proper approvals being granted. Because we have multiple environments (dev, test, and prod), we need to change the URL to the API as the app moves between environments to make sure the dev front end utilizes the dev API, the test front end uses the test API, and the prod front end uses the prod API.
7. The solution to this problem is to create three environment files: one for dev, test, and prod. In each of these files will be a variable “apiBaseUrl,” for example, that will tell the app where to look depending on the build type.
8. Wherever you need to access the apiBaseUrl variable in the application, it can be referred to by importing “environment” and using the expression “environment.apiBaseUrl.”
9. Now we need to write three scripts to tell the app to build using the different environments and their corresponding environment variables. To do so, we add the code below to the “scripts” section of our “package.json”.
"build:dev": "ng build --environment=dev --output-path=dev",
"build:test": "ng build --environment=test --output-path=test",
"build:prod": "ng build --environment=prod --output-path=prod",
The output-path is manually specified here because otherwise the ng build command creates a folder named “dist.” We need different folders to be created so we can tell each part of the release pipeline (we’ll cover this later in the article) to look back to a different artifact to deploy that specific code to Azure.
Finishing the Build
10. Back in VSTS, we now need to add the steps to our build sequence. Here is a snip of what the final build will look like:
11. To add a NPM task to your build, click on the plus next to “Phase 1.” Then, in the upper right-hand corner of the screen, type “NPM” in the search bar. Next, type a display name for how you want to see the name of the command in the task list (pictured above). Then, write the name of the command in the “Command” box. Lastly, you must point the command to the working folder in your project that has the package.json file.
An important note for the “install the angular cli” task is that you must set the version number to be 0 in order for the command to work properly, hint the flag under the command in the task list.
12. After the angular cli is installed, the next steps follow the same pattern: run a build, archive the file that the build publishes, and publish that artifact. To add the archive files and publish artifact commands, follow the same steps that we did to find the npm command.
13. Here you can see why it was important that we set up the different environments in our code. In our build in VSTS, we call the different dev, test, and prod build scripts that we created in the package json. This creates three different builds of the app that point to three different APIs.
14. Next, under the “Triggers” tab at the top of the screen, we want to enable continuous integration. This will automatically trigger a build whenever the master code base is updated.
15. Now you are ready to queue the build! Just click the “Queue” button at the top of the screen and then click on “Builds” under “Build and release” on the left side of your screen to watch your build happen.
16. After your build completes, click on the build number to view the build details. In the example below, the build number is 212.