Ionic and Cordova with Sublime Text 3 + Visual Studio 2013


I have been fiddling around with Ionic for a week or so now, and I quite like how easy it is to get up and running. Since I am quite used to all the jazz that Visual Studio provides, I found myself in uneasy waters trying to get everything done with a simple text editor and the command line. I know you will say, “but that is how the pros do it!” Perhaps. I will not get into that argument here. However, I wanted to do two things: Try to get myself acquainted with the simple text editor and command line tools, but at the same time, be productive using what I am already familiar with. So I picked Sublime Text 3 and Visual Studio and went on a quest to make the same project flawlessly work in both IDEs, with their own build and emulation, without having to check in any IDE-specific stuff to my repository. After some hit and trial, I think I may have got that to work. Here is are the steps:

Get Ionic

Install node.js from here

Make sure node is in your User’s Path so that it is available throughout the command-line

From Terminal/Command-prompt install ionic globally

$ npm install -g cordova ionic

Let’s call your new project “ProjectX

Navigate to where you’d like your project, then type

$ npm ionic ProjectX tabs


This installs the tabs starter project. We well leave it there for now.

Setting up Sublime Text 3

Install Sublime Text 3

Install Package Control from here

To install a package from Package Control:

Press Ctrl + Shift + P

Type Install Package

Type Package name

Hit enter on desired package

Install the following packages:









Setting up Visual Studio 2013

Get VS2013 Update 3

Download Multi-Device Hybrid Apps for Visual Studio CTP2.0 from here

Getting everything to work together

From Sublime Text 3, open the Project X folder. And that’s it. You are ready to go. You should already have the AngularJS and Ionic intellisense available to you.


To serve, from command-line within the ProjectX folder, type ionic serve. Ionic has live reload, so as soon as you save a change, it will automatically reflect in the browser, no need to refresh.




Alternatively, you could:

ionic build android (or ios)
ionic emulate android (or ios)
ionic run android (or ios)

Now start Visual Studio 2013

Create a new Javascript -> Blank Cordova project. Name the project and solution “www”


Your initial Solution will look like this:


Now close Visual Studio and head over to the folder where your solution is physically located

Copy the www.sln file over to ProjectX.


Then go back to your VS Project’s www folder and copy: bin, bld, merges, res, config.xml, and www.jsproj to ProjectX\www


Your ProjectX\www folder show now look like this:


Now over to Visual Studio and open the solution file within ProjectX.

You will see some folder we deleted missing. Go ahead and delete them from the solution.


Then from the Solution Explorer title bar, press the button to show all files.

You will see that all the folders from our ionic project are not included in the Project. Select all of them, and include them int he project.


Hit Build! This should launch the Ripple emulator. You can modify your defaults (like device, orientation, etc.) in the config.xml file.

Now go over to your ProjectX folder from command-line, and hit ionic serve.

That’s it! You are now running the same Ionic project through command-line and through Visual Studio 2013. You can now edit in Sublime Text 3, and serve/run via ionic command line. Or, you can go to Visual Studio 2013 and take advantage of the fantastic IDE, then compile using the Ripple emulator that comes with it. Or, do both, like I do!!!


Notes on Git

If your project is in source control, any changes you make will be picked up by all three: command-line, Sublime Text 3 (via GitGutter + Git Packages) and Visual Studio 2013! That means you can use the awesome Team Explorer  that VS comes with! 😀

However, if some other team member is not using VS2013, then checking in all the VS files may add clutter (unless everyone in your team uses VS2013). To get the to work, we will only check in the crucial parts of ionic into source control and ignore all the VS Specific files.

Your .gitignore in your ProjectX folfer should look like this:


This way, every team member gets a clean copy, which they can simply serve and use. Or if they wish to, add to their own local VS project!

Hope this was helpful! Happy coding!