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:
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
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:
node_modules/ platforms/ plugins/ www/bin/ www/bld/ www/images/ www/merges/ www/res/ www/scripts/ www/Project_Readme.html www/config.xml www/www.jsproj www.sln /www/www.jsproj.user /www.v12.suo
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!