Visual Studio Online is now truly cross platform

Microsoft is doing a great job of embracing open source, cross platform technologies. Just look at the release of Visual Studio 2015, we’ve got first class support for python, node, android, iOS, cordova, the list is endless. The days of using Microsoft developer tools to develop code that only runs on Windows servers is over.

More than that, updates to Visual Studio Online made over the last few years, starting with support for GIT and now the new cross platform build system, have finally made the Visual Studio Online platform a real choice for non Microsoft developers.

Don’t believe me, well let me walk through an example how you can use Microsoft tools to create the full development infrastructure, from source control to build, test, deployment and hosting, to support a node.js project (or any other non Microsoft language actually) without ever coming across, using or interacting with a Windows Server or Windows operating system.

Source Control

First thing is first, I log into my Ubuntu desktop and create a Visual Studio Online account. For those that don’t know, Visual Studio Online is the cloud offering of TFS. The first thing I can do once I’ve created my account is to create a new team project and select GIT as the version control system.

VSO new team project

Thats it, I’ve got complete GIT hosting now. Did you know VSO offers free unlimited private GIT repositories. Thats in stark comparison to GitHub who don’t offer any free private repos.

Write and Develop the Code

Now its time to start developing your codebase. I’m going to download Visual Studio Code, which is a free code editor from Microsoft. Visual Studio Code supports GIT integration, intellisense and debugging of an ever expanding set of languages and wait for it……it runs on Linux and Mac OSX.

vscode1

I can start writing my code and start committing and pushing changes into Visual Studio Online. I’m using the arkanoid game I wrote in an earlier post as an example. We can also debug the node code direct from visual studio code and we get intellisense on node modules.

You’ll notice at this point that we have been using exclusively Microsoft tools and not once have we had to leave our Ubuntu desktop and we could have done exactly the same on Mac OSX, pretty sweet.

Track Issues and Bugs

Visual Studio Online gives us way more than just a source repository. We can also use it to create and manage our development backlog. VSO supports Scrum, Agile and CMMI out of the box and support for customised processes  will happen during 2015. You and link backlog items to GIT commits and you also get team rooms, scrum and kanban boards.

ALM_KB_IntroChart_Agile

Build, CI and Deployment

Finally we need an automated build system. Ideally we would like to automate testing, packaging and deployment of our codebase and we can do that using VSO’s new build system. I’ve written alot about the VSO’s new build system, put simply, it is a web based, cross platform and fully extensible build system.

To get started, first install a VSO build agent onto your Linux server. Next, lets create an empty build definition.

vsobuildemptydef

Set the basic repo settings to point to the branch of your Node project you want to build and set the build queue (under General) to point to a queue containing your Linux build agent.

vsobuilddefreposettings

If you queue this build you should see the build agent clone the source onto the build server which is a good start. Lets add some more build actions, i’m going at add two tasks, one to run npm install and one gulp task.

NPM install will install all our npm dependencies, an important step to build any node application. Gulp is an extremely simple yet powerful task runner. Its open source, based upon node and javascript and has an ever growing library of tasks available for you to use. For me the beauty of gulp lies in its ease of use and platform portability. Your scripts can move between Windows and Linux without issue.

If you haven’t used gulp yet then checkout this nice tutorial. Put simply, we need to install gulp and any gulp tasks we will be using, create a gulpfile.js file and code all our actions in this file. So, create a gulpfile.js somewhere in your source repo.

Here’s my gulpfile.js. It runs jshint to analyze our javascript files and detect errors in the javascript code.

Then it deploys the site by pushing a git repo. Azure web apps supports deployment via git, so this script could easily handle deployment to Azure.

// include gulp
var gulp = require('gulp');

// include plugins
var git = require('gulp-git');
var jshint = require('gulp-jshint');
var argv = require('yargs').argv;

var gitUrl = argv.gitUrl
console.log('deploying to giturl ' + gitUrl);

// JS hint task
gulp.task('jshint', function () {
    gulp.src('./public/js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

// push and use force to always just overwrite the remote repo
gulp.task('deploy', function () {
    git.push(gitUrl, 'master', { args: " -f" }, function (err) {
        if (err) throw err;
    });
});

// default gulp task
gulp.task('default', ['jshint', 'deploy'], function () {
});

The first lines load up all the gulp components using require, then we simply run the jshint task and the deploy task. We can easily add many more tasks to the gulp script such as minifying files or stripping out debug statements.

One interesting thing to point out in the script are the lines

var argv= require('yargs').argv;
var gitUrl= argv.gitUrl
console.log('deploying to giturl ' + gitUrl);

It is common during automated builds to supply build/environment specific arguments into our build scripts. We can achieve that with VSO and gulp using yargs. The code above allows for a command line passed into the gulp script to be used. In the VSO build definition we simply create a variable

vsobuildmyarg

Then update the gulp task to pass this variable into the gulp script.

vsobuildmyarg2

Running build we will see all tasks running, our gitUrl passed in and parsed and the site deployed to Azure.

vsobuildoutput

Wrapping Up

There it is. End to end development, testing, versioning and deployment of our node app all from within Visual Studio Online.

Advertisements

One thought on “Visual Studio Online is now truly cross platform”

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s