Using Visual Studio Online to Build a GitHub Hosted JavaScript Project with NPM, Bower, and Grunt (for Free)

by Jeremy Likness

This is one of those posts I never thought I’d write. Visual Studio Online has grown in leaps and bounds over the past year. It is the de facto solution I use in the majority of my projects because it is free to set up, features free build minutes every month, and even five free licenses to develop against. That is a very low cost to entry considering you can provide unlimited stakeholder access to manage your full application lifecycle from requirements and sprint planning down to deployments.

Recently updates were made to the build system that enable a web-based, cross-platform experience. In this post I’m going to show you how to perform a hosted JavaScript build from a GitHub repository by managing packages with NPM and Bower and using Grunt for the task engine. It’s quick, easy, and free.

GitHub

This post assumes you have a working knowledge of hosting projects in GitHub and how to set up JavaScript builds using NPM, Bower, and Grunt. If you’re not familiar, there are many existing online tutorials to help get you started. Getting started with Grunt, Bower, and NodeJs is a great introductory post. For this example, I use my ($Q)orlate project, an AngularJS module that assists with inter-component real-time communication. Don’t worry, you won’t need to know anything about Angular to follow along.

The only special set-up within my project is that my packages.json file has a special post-install script to make it easier to install Bower components in the build environment:

"scripts": {
       "postinstall" : "node_modules/.bin/bower install"
   }

For Visual Studio to access my repository, I need to create a special access token. I tap Settings:

making it easier to install Bowser

Then choose Personal access tokens:

choose personal access tokens for Bowser

I give the token a meaningful name and keep the defaults for just repository access. After clicking Generate Token I get a special token I can use in Visual Studio Online.

organizing tokens for visual studio repositories

After I copy the token, I’m done on the GitHub side of things.

Visual Studio Online

Next, go to your Visual Studio Online account. If you don’t have one, I suggest you sign up for free. It’s quick and easy. You’ll need to create a project (there are instructions when you sign up) and now you’re ready to go.

I use a project to organize my weeks. As a practice manager for my company I’ve got a fairly full schedule, and the Kanban board lets me continually prioritize my time and focus and ensure nothing gets forgotten. From the main page of my project, I’ll tap the Build tab.

signup for Visual Studio Online account

From there I’ll tab the Actions button to add a new build definition.

add a new build definition in visual studio

I choose the Empty template to start with.

vso_empty

By default I end up on the Build tab. The first thing I want to do is navigate to the Repository tab instead.

repository tab visual studio

Here I can change the repository type to GitHub and paste my access token. After it is pasted and confirmed, the list of repositories is available so I choose qorlate and the default branch. I’m not concerned about cleaning the build environment as I know it will fetch everything needed. Now the build definition is linked to my GitHub repository. I can navigate back to the Build tab and add my first build step.

qorlate definitions for github

For the first build step, I want to run NPM Install and ensure the grunt command line interface and Bower are both configured.

NPM Install

The working directory defaults to the root of my project, which is fine. If you have a sub folder in a larger project, you can specify the correct directory here. Notice I just add the commands I’m going to pass to the arguments tab.

npm install -g grunt-cli bower

Next, I add the same build step with no arguments. This will automatically install any dependencies for the project. You can drag and drop build steps in the UI to determine the order. Now I have the step to install grunt and bower, and the step to install dependencies:

npm install build step

To run the grunt task I have to use some magic. As of this writing there isn’t a built-in build step for grunt (but there is for gulp, in case you prefer to use that). So, I’ll add a Command Line step instead and specify the path to the grunt command line interface. I renamed the step grunt build to make it clear what it’s doing.

c:\program files\nodejs\node.exe

C:\NPM\Modules\node_modules\grunt-cli\bin\grunt build

Note that if you are running the build on your own host (I’ll share that later) you will want to specify the path on your build machine to the installation. The arguments are:

c:\npm\modules\node_modules\grunt-cli\bin\grunt build

This will build and in my project I have the output going to a folder named build. So, I add a Publish Build Artifacts step and indicate where those artifacts exist.

add a Publish Build Artifacts step and indicate where those artifacts exist

Now I save the definition and tap the Queue build… button. You can also right-click on the definition to do the same. I’m going to use the Hosted controller that is provided for free. However, by default even though it has Node, it isn’t listed a capability as of this post. So, we need to fix that:

On the General tab for the build definition, ensure the default is Hosted and tap the Manage link.

for the build definition, ensure the default is Hosted

This will give you a list of pools (outside of the scope of this post). Select Hosted and the default agent will be highlighted. Tap Add capability and add an entry to indicate the agent supports node:

Select Hosted and the default agent will be highlighted. Tap Add capability and add an entry to indicate the agent supports node

Be sure to tap Save changes after making the change. Now you can submit the build. Ensure the Queue is Hosted and keep the defaults the same. If you get a message that the agents are not online (I assume this is a preview bug) just click OK to keep going. The build will queue and a console window will appear providing you step-by-step output from the build.

The build will queue and a console window will appear providing you step-by-step output from the build

Once the build is done, you can click on the build name to view the logs and artifacts:

click on the build name to view the logs and artifacts

Using the explorer I verify the output was generated and packaged for me:

Using the explorer I verify the output was generated and packaged

And that’s it! I’ve successfully used a free hosted controller to build my GitHub project using Visual Studio Online. Here’s where it gets really cool. If I’d rather do it on-premises, not a problem! I can navigate to the pool definitions and tab Download Agent for an installable that will let me use my on-premises agents to run Visual Studio Online builds.

I can navigate to the pool definitions and tab Download Agent for an installable that will let me use my on-premises agents to run Visual Studio Online builds.

You can have multiple agents with multiple capabilities and they will automatically synchronize with the VSO collection to perform their tasks. Now THAT is powerful! Are you interested in learning more about what VSO can do for you? Contact the experts and let us share how!


3 comments to Using Visual Studio Online to Build a GitHub Hosted JavaScript Project with NPM, Bower, and Grunt (for Free)

  1. Kevin Clark
    February 2, 2016

    Thank you for the article. However, using my account on xxx.visualstudio.com I cannot modify the agent to add user capabilities and npm. Do you have a suggestion?

    Is it possible on the cloud service to use NPM?

    Thanks
    Kevin

    Reply
  2. Jeremy Likness
    February 2, 2016

    In my account the hosted controller had NPM by default. Is that not the case with yours? I did not need to manually add it.

    Reply
    • Kevin Clark
      February 2, 2016

      I have to download the agent and configure it to use \”Default\” and not \”Hosted\”. I was confused by the \”Hosted\” screen shot above.

      I have a build working now. I am just battling through corporate proxy server issues now.

      Nice job

      Kevin Clark

      Reply

Leave a comment