This is the first in a series of posts will take you through the steps required to take a static website, in my case an Angular SPA and deploy this to an Azure App Service (Web App) via Visual Studio Team Services (VSTS). The Angular SPA is secured by ADALJS and the last part of this series will help us use gulp tasks within VSTS to configure the Angular app for different environments.
Note: We could instigate this deployment from Azure and tell that to grab the source and deploy for us, this is fine for dev/testing but in my scenario I control the source code but want to deploy to the customers Azure tenant when I merge the dev branch of the code into the master branch.
I’m not going to go into any of the source control aspects of this and I’m also assuming you already have an Azure subscription and have created the relevant Azure AD application and Web Apps to support the deployment. There are too many tutorials/blog posts on this out on the net for me to go over it again here.
The blog series will be broken down into 4 post, described below:
Part 1: Use NPM and gulp build tasks 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
Part 4: Injecting Build Variables into an Angular App with VSTS Continuous Integration Builds
The process goes as follows:
- Add the npm packages we need to support packaging the app
- Create a gulp build task that our VSTS build will call to package our files.
Adding the npm packages we need to support packaging the app.
Now I’m assuming that you’re using npm and gulp tasks already within your app, most Angular apps do these days.
From your app directory add the following packages with this command:
If you already are using any of these packages you can take them out. The –-save-dev switch will add these as dependencies to our packages.json file.
Create the gulp task to package up our files
Now we have the files to support out build task we can move on to packaging them up. In your gulpfile.js file add the following:
We don’t need to incorporate this build task from any of our existing gulp tasks which you probably have, this is only a task that will be run on the build server in VSTS.
That’s it for now, in part 2 we will move on to Visual Studio Team Services where we connect to our source control and use the task we created above to deploy to Azure.