Introduction
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.
The application is built using Visual Studio Code all in HTML and JavaScript, so no Visual Studio and no VS builds. The aim is that when we check code into VSTS source control a build task will run and deploy this into Azure for us. Although my app is written in Angular, only the last post makes actual reference to this and shows anything Angular specific. Your app could be written with any framework you like, ReactJS, Knockout etc.. the main point of this post is that we are deploying a plain HTML website to Azure.
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
Ok onto the meat of the first post. As we’re not using Visual Studio and only deploying static HTML and JavaScript files we have to package up our files into a zip file and tell the deploy task where this is. To achieve this, we will create a gulp build task that will help us to package up the files as part of the build process. This is what this post does.
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:
| npm install path gulp-zip minimist fs -–save-dev |
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:
| var path = require('path'); | |
| var zip = require('gulp-zip'); | |
| var minimist = require('minimist'); | |
| var fs = require('fs'); | |
| var knownOptions = { | |
| string: 'packageName', | |
| string: 'packagePath', | |
| default: {packageName: "Package.zip", packagePath: path.join(__dirname, '_package')} | |
| } | |
| var options = minimist(process.argv.slice(2), knownOptions); | |
| gulp.task('vstsbuild', function () { | |
| var packagePaths = ['**', | |
| '!**/_package/**', | |
| '!**/typings/**', | |
| '!typings', | |
| '!_package', | |
| '!gulpfile.js'] | |
| //add exclusion patterns for all dev dependencies | |
| var packageJSON = JSON.parse(fs.readFileSync(path.join(__dirname, 'package.json'), 'utf8')); | |
| var devDeps = packageJSON.devDependencies; | |
| for(var propName in devDeps) | |
| { | |
| var excludePattern1 = "!**/node_modules/" + propName + "/**"; | |
| var excludePattern2 = "!**/node_modules/" + propName; | |
| packagePaths.push(excludePattern1); | |
| packagePaths.push(excludePattern2); | |
| } | |
| return gulp.src(packagePaths) | |
| .pipe(zip(options.packageName)) | |
| .pipe(gulp.dest(options.packagePath)); | |
| }); |
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.
Moopoo 
Reblogged this on iThink SharePoint and commented:
Interesting stuff from Matt, will have to incorporate this into the Invoice Form Application.
[…] on from the previous post where I showed how to create our gulp build task to package our files for deployment, this post […]
[…] recap, in part 1 we have learnt how to add gulp tasks to help us with our build process in Visual Studio Team […]
[…] recap, in part 1 we have learnt how to add gulp tasks to help us with our build process in Visual Studio Team […]
[…] on from the previous post where I showed how to create our gulp build task to package our files for deployment, this post […]
[…] 1: Use NPM and gulp build tasks to support Continuous Integration with VSTS and Azure for an AngularJS … Part 2: Deploy an Angular App to Azure App Services (Web App) with VSTS Continuous Integration […]
[…] 1: Use NPM and gulp build tasks to support Continuous Integration with VSTS and Azure for an AngularJS … Part 2: Deploy an Angular App to Azure App Services (Web App) with VSTS Continuous Integration […]
I read this post completely concerning the comparison of
latest and earlier technologies, it’s amazing article.