Continuous Integration with Ionic Framework using Visual Studio Online – From Check In to Device


Editor’s note: The following post was written by Visual Studio and Development Technologies MVP Mike Douglas as part of our Technical Tuesday series with support from his technical editor, Visual Studio and Development Technologies MVP Jeff Bramwell.

Sample code used in this example can be found in the following GitHub repository: https://github.com/mikedouglasdev/ionic_taco_vsobuild_sample

Creating the Ionic Tabs Starter App
Building mobile apps?  How would you like to build a mobile app, check in code, and within minutes be able to verify the functionality of it on any of your devices?  This article will walk you through setting up an Ionic project within Visual Studio 2015, checking it into Visual Studio Online, kick off a build using the new build system, and upload the app to Ionic View.  This will allow you to view and test your application within minutes.  You will see how Visual Studio 2015 Tools for Apache Cordova provides a rich development environment for building hybrid mobile apps that take advantage of your existing web skills.   The Ionic framework is not only an AngularJS based framework that is built on top of Cordova, it provides a feature-rich ecosystem for building applications including one of my favorite features called Ionic View.  Ionic View is a mobile app that can run your application from your devices without deploying to the store.  

 
To get started, you will need Visual Studio 2015 installed with the Tools for Apache Cordova configured.  You can configure this locally or create an Azure VM running Visual Studio 2015 with Cordova Tools.  Having the Cordova tools configured provides most of the tools you need.  You will need Chrome to run the app in the Ripple emulator.  The tools can also be tricky to manually configure.  Next you need to install Ionic.  You will get used to command line interfaces (CLI) when working with Cordova and Ionic.  To install Ionic, use the developer command prompt and run the following command. 

npm install ionic -g 

The -g tells npm, or the Node Package Manager tool, to install it globally so it isn’t just within the scope of the project.

There are several ways to create an Ionic project including the CLI and through Visual Studio.  Ionic has extensive documentation on using their CLI to create project.  Let’s create the project using Visual Studio.  Within Visual Studio 2015, open Tools > Extensions and Updates.  Select Online and Search for Ionic and install the Ionic Tabs Template

 
Next, create a new project using the template located under Other Languages > JavaScript > Apache Cordova Apps
 

At this point you can run the app locally in the Ripple emulator.  You may receive a popup notification to allow the traffic through your firewall.  Allow this to occur if prompted.  However, there are few additional files we will need to add to build our application.  Let’s review these.

Gulp
Gulp is a popular and powerful build system based on streams that we are going to use to perform the build, packaging, and eventually uploading to Ionic.  It is outside the scope of this article to present a full background on Gulp.  I’ll cover the important parts for our scenario.  Instead of starting from scratch, let’s start with a sample Gulp file that showcases the primary features we need for this.  Gulp itself is very simple but there is extensive plugin support to handle virtually every need.   Microsoft has wrapped a lot of the Tools for Cordova complexities into a Gulp plugin.  The following provides a sample of the script to help you see how it is used to build projects on OSX and Windows platforms. 
https://github.com/Chuxel/taco-team-build/tree/master/samples/gulp  
 
The package.json is also important.  This file includes the plugins for gulp to use.  Add these two files to the root of your project as shown in this image. 
 

The last thing we need to do before checking the solution into the repository is to add the ionic. Project file.  This file specifies the name of the app and appid used during the Ionic upload process to make the app available through Ionic View.  To create this, you first need an Ionic account.  Go to http://ionic.io/ and create an account.  Open a command prompt and navigate your project’s folder.  Run the following commands:  ionic login (using the account you just created) and ionic upload.  The second command will make your app available on any IOS or Android device through the Ionic View app.

Continuous Integration from check-in to device
Now, we want the latest version of our app available with each check in.  Let’s configure our application for continuous integration so the ionic upload process happens with each check in.  VSO includes the new cross platform build system where we can use the hosted build agent to build and upload our app.  Each VSO account includes 240 free build minutes each month and is cost effective for going over this amount.

First we want to commit and push it into source control.  Create a free Visual Studio Online account if you don’t already have one and create a Team Project using Git for source control.  The cross platform build agent at this time only works with Git.  Clone your repository and add your solution to the repository.

Once your solution is committed and pushed into the repository, navigate to your VSO account and go the BUILD hub.  The build system in TFS 2015 and VSO allows you to create and manage your builds directly from the web.  To create a new build, click on the green plus in the top left and choose Empty because we are not using Visual Studio to do our build, we are going to use gulp.

To build the application using gulp, add the following build steps.  The npm install step is required before gulp can be used.  You don’t need to pass any arguments but do set the Working Directory on each of these to your project’s relative path as shown below.  The second npm install step is used to install ionic on the hosted build agent. Pass ionic –g as arguments to this step.  The last step is to pass the gulp file to the Gulp task and again provide the relative path to the file to look something like this, MobileApp/MobileApp/gulpfile.js. 
 
At this point, you can save your build and click on Queue build to test your build process. When it completes, this should show a passing build.  Once we enable continuous integration from the Triggers tab, we have our app building and creating the app packages on the server but we are still missing two key things.  I might want to take the build and install it manually on one of my devices and we still need the build to upload our app to ionic. 

To make the packages available once a build completes, add a Publish Build Artifacts step to the build.  The gulp file organizes all of the packages in the bin folder.  Use the variable $(Build.SourcesDirectory) as the root and contents to include everything under the bin folder as shown. 
 

To enable our application to upload the app, we first want to store our user name and password as variables.  On the Variables tab you can define variables you want to use throughout the build.  Variables can also be stored securely so other users can’t see the password and it doesn’t have to be stored in source control.  For regular variables, these will be available to our gulp script as an environment variable.  For the secret variable, we will have to pass this into our gulp file and read it in using a gulp plugin. 
 
Update the gulp task settings to explicitly call the default task and pass in the password. 
 
Back in project, we need to add some additional functionality to our gulp script.  We need to add two plugins, gulp-run and yargs.  Gulp-run will allow us to run the command line tool for ionic upload and yargs will allow us to retrieve the password argument passed in.  Add these two to you package.json as shown. 
 
Finally update the gulp file to include the gulp-run and yargs plugins.  Create a new gulp task, name it default, rename the previous default task to something like copyRelease and specify it as a dependency for the new default.  Within the new gulp task, assign the email value from the environment variable and the password from the argument. 
 
Commit and Push those changes to the repository.  If you selected CI as the build trigger, it should be queued automatically otherwise queue it manually.  When it completes, you should see success! 
 
In the build log, under the gulp default –password $(IONIC_PASSWORD) step you can see that the application was successfully uploaded. 
 
To download the packages, you can click on the Artifacts link to either Download or Explore online. 
 
To view the app from a device, download the Ionic View app from the App Store / Google Play Store.  Log in using the same account as above and you will see your app.  Click on it and download the latest to run your app as if it was deployed to the store. 
 
You now have a cross-platform hybrid mobile application that can be tested on iOS and Android devices by simply checking in the Ionic framework based application using Visual Studio 2015 Tools for Cordova and the new build system in Visual Studio Online.

I hope this will help you get started with TACO and Ionic.  There are so many more things you can do.  With Ionic you can set up distribution lists to view your app and so much more.   When you create that million dollar idea, don’t forget about me  🙂

Additional Resources

Comprehensive guide to Continuous Integration with Cordova apps https://github.com/Microsoft/cordova-docs/blob/master/articles/tutorial-team-build/General.md

Use the Visual Studio Tools for Apache Cordova with Visual Studio Online or Team Foundation Services 2015
http://taco.visualstudio.com/en-us/docs/tfs2015/

About the author

Mike is a Solution Consultant at Deliveron Consulting Services.  He specializes in working with development teams to implement Application Lifecycle Management (ALM) solutions to eliminate traditional silos between development, testing, and project management to establish cohesive processes with the Visual Studio ALM tools. Follow him @mikedouglasdev.

 

Comments (3)

  1. Jerry Volcek says:

    Nice post Mike, well done!

  2. Pierrick says:

    A really great post. One fix: "Use the variable $(Build.SolutionDirectory)" should be "Use the variable $(Build.SourcesDirectory)". The screenshot was correct but not the text.

  3. Mike Douglas says:

    Thanks Pierrick, nice catch!  I'll see if I can get this changed.

Skip to main content