skip to Main Content

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 things 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.

Visual Studio Blog Image 1Jpg

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

Write and Develop the Code

Now it’s 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.

Visual Studio Blog Image 2.png

I can start writing my code and start committing and pushing changes into Visual Studio Online. I’m using the Arkanoid game I wrote 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 link backlog items to GIT commits and you also get team rooms, scrum and kanban boards.

Visual Studio Blog Image 3.png

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 a lot 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, let’s create an empty build definition:

Visual Studio Blog Image 4.png

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:

Visual Studio Blog Image 5.png

If you queue this build you should see the build agent clone the source onto the build server which is a good start. Let’s 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. It’s 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 check out 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:

Visual Studio Blog Image 6.png

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:

Visual Studio Blog Image 7.png

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:

Visual Studio Blog Image 8.png

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

Visual Studio Blog Image 9.png

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

Visual Studio Blog Image 10.png

Wrapping Up

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

By Hamada Shather – Consultant

About the Author

Our technical team contribute with blogs from their respective specialities, be that Azure, SQL, BizTalk, SharePoint, Xamarin and more. From the lead architect to developers and testers, each person provides content straight from their experience.

Back To Top
Contact us for a chat