This is the second post in this series and the post will pick up where we left off.
Part 1: Use NPM and gulp build tasks to support Continuous Integration with VSTS and Azure for an AngularJS app
Part 2: Deploy an Angular App to Azure App Services (Web App) with VSTS Continuous Integration Builds (this post)
Part 3: Using gulp tasks in Visual Studio Team Services to configure constants for an AngularJS app
Part 4: Injecting Build Variables into an Angular App with VSTS Continuous Integration Builds
We are going to configure Visual Studio Team Services and create the build tasks that will deploy our files into our Azure Web App using the gulp tasks we created previously. This will run automatically when we check in to source control.
Login to your Visual Studio Team services account and navigate to your chosen project in VSTS and click the settings icon to the right of the screen.
From here click on the Services tab
On the Services screen click New Service Endpoint and choose Azure Classic
Note: I probably should have used (and tried) Azure Resource Manager as it’s the new kid on the block but this did not work for me when I got to the stage of adding the build task. I may revisit this but for now this was about me getting this working and deployed.
On the resulting window check the certificate based checkbox
Now we need to get the rest of the settings. To do this we need to download the publishing profile from our Azure subscription.
To get this click the download publish settings file link at the bottom of the screen above. Once you have this enter these details in the corresponding boxes above. You can call the connection name anything you like, remember it as we will need it when we create our build tasks. Click OK when this is done.
Just in case you’re interested you can download your publishing profile from here.
Configuring the Build Definition
Now we can add a build definition to deploy our site to Azure.
Go back to your project in VSTS and click the Build link. From here click the add button to create a new build definition. Choose to create a new Empty definition
Choose your repository and branch to use for the build
From the new build definition screen, click Add Build Step and add the following build tasks:
- npm install
- Azure Deployment (Azure Web App Deployment)
Click OK when you’re done and you should end up with a screen similar to that below.
Ok, lets configure each of the build tasks.
npm install is easy, we can leave the defaults on this.
To configure the gulp task we need to use the following values, taken from the previous post.
- Gulp File Path:
- Gulp Task(s):
Leave everything else as default
Enter the following settings:
- Azure Subscription: Enter the Connection Name from way back when we created our Service Endpoint above.
- Web App Name: This is the name of our existing Web App in Azure we want to deploy to. You can get this from the App Services blade in the (new) Azure Portal.
- Web App Location: Enter the same location as for the Web App we are deploying to.
- Slot: I left this blank as I’m not deploying to a slot
- Web Deploy Package: $(Build.StagingDirectory)/package.zip
I left everything else blank. One point to note on this screen the first 3 boxes are dropdown and should show the Subscriptions, Web Apps and Locations respectively. This wasn’t the case for me and I had to manually add them. It all worked for me, just be careful to add the correct values if it doesn’t allow you to choose them.
Hit the Save button and everything should be good to go.
Next step is to trigger our builds. To do this click on the Triggers link.
Check the box for Continuous Integration (CI) and make sure the correct branch is selected.
All that’s left to do is check in code into the correct branch and this should fire a build for us and deploy to Azure.
Once you check the code in, you should see a build queued and you can follow it through until completion.
In the next post I will show how you can configure the gulp build task to build some AngularJS constants that are specific to the environment we are deploying to.