Deploy an Angular App to Azure App Services (Web App) with VSTS Continuous Integration Builds

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

image

On the Services screen click New Service Endpoint and choose Azure Classic

image

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

image

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

image

Choose your repository and branch to use for the build

image

From the new build definition screen, click Add Build Step and add the following build tasks:

  • npm install
  • gulp
  • Azure Deployment (Azure Web App Deployment)

Click OK when you’re done and you should end up with a screen similar to that below.

image

Ok, lets configure each of the build tasks.

npm install

npm install is easy, we can leave the defaults on this.

image

gulp

To configure the gulp task we need to use the following values, taken from the previous post.

  • Gulp File Path:
    gulpfile.js
  • Gulp Task(s):
    vstsbuild
  • Arguments:
    --packagePath=$(Build.StagingDirectory)

Leave everything else as default

image

Azure Deployment

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.

image

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.

Advertisements
Tagged with: , , , , ,
Posted in Azure
4 comments on “Deploy an Angular App to Azure App Services (Web App) with VSTS Continuous Integration Builds
  1. […] to add gulp tasks to help us with our build process in Visual Studio Team Services (VSTS). Then in part 2, we looked at how to use this task to help us integrate with VSTS Continuous Integration so our app […]

  2. […] 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 Part 3: Using gulp tasks in Visual Studio Team Services to configure constants for an AngularJS app […]

  3. […] to support Continuous Integration with VSTS and Azure for an AngularJS app. (this post) Part 2: Deploy an Angular App to Azure App Services (Web App) with VSTS Continuous Integration Builds Part 3: Using gulp tasks in Visual Studio Team Services to configure constants for an AngularJS app […]

  4. […] 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 Part 3: Using gulp tasks in Visual Studio Team Services to configure constants for an AngularJS app […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: