May 10, 2017

/

Deploying an Angular CLI project using VSTS Build and Release

Deploying an Angular CLI project using VSTS Build and Release

After writing an article on how to Deploy a Create React App project to Azure with VSTS Build and Release I thought I would create a similar (near identical) article on the same thing with the Angular CLI! The Angular CLI has similar goals as Create React App however it also can be used to scaffold out new components and is more wide in its purpose. However the steps that you create are almost exactly the same so I have even copy and pastedd a lot of my last article…

Creating the project

I’m going to assume that you have a Visual Studio Team Services account with a fresh empty Team Project setup for this. If you don’t then follow Microsoft’s guide for creating an account and for creating a team project. I am also assuming you already have an Azure Subscription you can create a web app in. If not then create a free one now.

NOTE: I’m also assuming that you already have the node >=6.9 uninstalled on your machine as that is required for the Angular CLI

The first thing we need to do is create our app using the Angular CLI and put it into our repo. To do this first install the Angular CLI on your machine:

npm install -g @angular/cli

Now go to a folder on your machine you would like to create the project and run the following:

ng new angular-cli-vsts
cd angular-cli-vsts

This will spit out your brand new Angular project app complete with everything you need to develop, test and build your application. To find out more the Angular CLI supports see its wiki here. Just to test the application and make sure everything went alright try running the following:

cd angular-cli-vsts # this once again is just the name you gave in the previous step
ng serve # you can also run npm start instead

If everything went okay this should launch the app in your browser at http://localhost:4200. While we are at it lets just test the build works too. From the root of the project folder run the following:

ng build # or npm run build

After a minute or so this will create a folder in your project dist which contains the optimized production version of the application. To test this out lets install the npm package http-server and see whether it works:

npm install -g http-server

Now you can cd into the build directory from the root of the project and run the server:

cd dist
http-server 

If you open your browser and navigate to http://localhost:8080 you will see the production version running. This is essentially what we want to achieve but inside VSTS Build and Release and deployed to Azure!

Committing the code to VSTS

You probably already know this step but I can’t really leave it out… Run the following commands from your command prompt to push the code up into your projects VSTS git repository (the Angular CLI creates a git repo for you!):

git remote add origin {your-git-url-here}
git push -u origin master

VSTS build

VSTS Builds are made up of steps that create artifacts for deployment. You can also do the deployment in the build but its better to create a release artifact and deploy it using the release manager (which I will get to later). We will essentially be creating an automated build that will install the npm packages and build the JavaScript much like you do on your local machine. Then we create a ZIP folder of the output ready for deployment to an Azure Web App.

Creating the build

From Visual Studio Team Services you can create new builds for your project by hovering on the Build and Release tab on the top navigation, clicking on Build. On the lest hand side under Choose a template click on the link Empty Process. This will bring you to an empty build definition with only one step called Get Sources. If you like you can name the build something sensible. I have named mine “Angular CLI App Build”.

Step 1 : Install dependencies

The first step is to install the NPM packages that are needed to build the application. Click on the Add Task button, enter “npm” in the search box, hover over the npm task and click Add. This will add an npm tasks to your build process and if you click on the item then you will see it has a few properties you can customize: Display Name, working folder, npm command and arguments. Make sure you have the following values: Display Name: Install dependencies working folder: (leave blank) npm command: install arguments: (leave blank)
the following values:

Display Name: Build
working folder: (leave blank)
npm command: run
arguments: build

This will build the Angular app into the ‘dist’ folder on the build server.

Install Dependencies VSTS Npm Task - Angular 2

Step 2: Build

The next step is to run the npm run build command that we tested locally earlier. Click on the Add Task button, enter “npm” in the search box, hover over the npm task and click Add. Click on the newly created tasks and add the following values:

Display Name: Build
working folder: (leave blank)
npm command: run
arguments: build

Step 3: Create release package

In this step we will zip the output from the npm run build in the last step. Click on the Add Task button, enter “archive” in the search box, hover over the Archive Files task and click Add. Click on the new archive files build step and add the following values:

Display Name: Create release package
Root folder (or file) to archive: dist
Prefix root folder name to archive paths: Unchecked
Archive type: zip
Archive file to create: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip

This will create a zip folder with an appropriate name using unique BuildId generated by VSTS and in the Artifacts Staging Directory. These values are build in variables and for a full list of them see the Build Variables Documentation.

Step 4: Publish release package

In this step we will publish the zip we created in the last step. Click on the Add Task button, enter “publish” in the search box, hover over the Publish Build Artifacts task and click Add. Click on the new Publish Build Artifacts tasks and add the following values:

Display Name: Publish release package
Path to Publish: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
Artifact Name: drop
Artifact Type: Server This will create a release artifact called
drop (this is just a conventional name and could be anything) containing the ZIP we created earlier.

That’s it for all our steps. Lets run the build! Click on Save and Queue in the top right hand corner and click Queue. Now the build will run for us. While that is happening lets turn on continuous integration so that when we make changes in our repository it will trigger a new build.

Setting up continuous integration

Go back to the build definitions by clicking on Builds in the top left. Now you will see a list (of one) builds. If you click on the build you created earlier you will see the build summary page. On the top right click on Edit. This will take you back to the edit view we created the build in. From the edit page click on the Triggers tab above the Process list. Enable continuous integration by clicking on the switch and then however over Save & queue to select Save. We don’t need to trigger another build we just want to change its configuration.

Verifying the build

One cool thing about the VSTS build and creating a release package this way is that we can verify what is in our release package really easily. If you click on Build to go back to the build list and then click on the build we created you will be able to see if the build we kicked off earlier is complete. If it isn’t just wait until it is… Once complete you can click on the build number under Recently Completed and once its loaded there will be an Artifacts tab. This gives you access to the artifacts that were published in the build. Download the artifact drop and you can see that inside it is a zip folder containing the same files as were created and tested locally. You could even extract it and test it using http-server as we did before if you like!

Creating a release – App Service Deployment

There are a few ways you can deploy to an Azure Web App and the easiest way is to do an App Service deployment. But first we need a Web App…

Create the Web App

Log into http:///portal.azure.com and click New on the left hand side. In the search box enter Web App, in the results select Web App and click Create. In the following dialogue give it the following values:

NOTE: The App Name must be unique to the whole of Azure so I would suggest putting your name like “sethr” or something in place of {unique-name}.

App Name: angular-cli-{unique-name}
Subscription: (Select your subscription)
Resource Group: angular-cli-vsts
App Service plan/Location: (Create a new one or select an existing one)

Click Create and wait for the web app to finish deploying.

Creating the release definition

Go back to your Visual Studio team services account and hover on Build and Release and click on Releases to get to the release page. Click on New definition and then under **Select a template select Empty and click next. On the next screen make sure you have selected the build you created earlier and also check the box next to Continuous deployment to trigger this release whenever a new build is successful. Click on Add Tasks, click add next to Azure App Service Deploy then click close. Select your Azure subscription, click Authorize and follow the prompts to log into your Azure account. This is assuming you are using the same account for both VSTS and Azure. If not you need to create a service principal by following the instructions under “Connect your Azure subscriptions to VSTS in 3 clicks” in this article.

When you come back you can press the refresh button and this should appear in the subscriptions list. It may take a moment to show up but in the App Service Name drop down you should find the Web App that you just created earlier. Select it and then click Save on the release definition. Click Create Release. In the popup you can select which build version you want to release (it defaults to the latest) and then select Create. You can see the progress of this by clicking on the link next to the definition name that says Releases and double clicking the row of the release you just created. Click on the Logs tab at the top to see the logs.

Angular CLI VSTS Release Definition

Testing the release

Now pop back into the Azure Portal click on App Services on the left hand side and find the app you created. Click on the link under URL and you should see you brand new Angular app deployed and running just as it was locally!

Enabling client side routing

Unfortunately out of the box if you have client routing in your Angular app Azure won’t know about this and it will give you a 404 if you try to visit a URL like http://myapp.azurewebsites.net/client-route. However thanks to this great guide on how to do it with a React app and the power of continuous integration this is an easy fix. Add a file web.config to your local project with the following content:

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Run the following to commit and push this to your repo:

git add .
git commit -m "Added web.config to handle client routing"
git push

If you followed all the instructions up until now this should kick off a new build, which in turn will kick off a new release and you will be good to add routing to your app and it will work perfectly in your Azure Web App with direct links! If you want to see the final code you can find it here in Github

Seth Reid

/

Deploying an Angular CLI project using VSTS Build and Release