Ionic and Cordova with Sublime Text 3 + Visual Studio 2013

  • Home
  • Guides
  • 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

Let’s call your new project “ProjectX

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

Capture1

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:

Ionic

Angularjs

Git

GitGutter

BrackerHighlighter

Emmet

DocBlockr

SidebarEnhancements

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.

su

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.

Capture3

 

Capture4

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”

Capture5

Your initial Solution will look like this:

Capture6

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

Copy the www.sln file over to ProjectX.

Capture7

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

Capture8

Your ProjectX\www folder show now look like this:

Capture9

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.

Capture11

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.

Capture12Capture13

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!!!

Capture14

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!

 

 

 

 

Tags:
Blog Comments

exactly what I was setting out to do, would have taken me days, your post saved me lot of time, thanks a ton.

Very cool thanks!

Thank you very much!

Leave a Comment