Setting Up PhoneGap/Cordova for Visual Studio

It’s always a struggle to find time to invest in side projects when you work and play an active role in your kids lives.  I appreciate when installing tools is just simple and you don’t have to google “why doesn’t …. do …” or “where is…” because the instructions aren’t straight forward or are missing steps/pieces.  I found this the case with the latest phonegap instructions as of 2014-3-9.

  1. Install Windows SDK.  I’m using Windows 7.1 because I have a Win7 machine, I found SDK here.  This installed Visual Studio 2010 Express for Windows Phone (VS2010).
  2. Download PhoneGap SDK and unzip in C:\Tools.  PhoneGap SDK is on github here.
  3. In the C:\Tools\phonegap-master (you might have to drill down a bit) there will be a lib folder, and in it there are folders for the different target frameworks one of which is “windows-phone”.  As of recent the Visual Studio template .zip is not there.  I had to run a batch filed called “createTemplates.bat” which created templates for WP8 and WP7.
  4. Once you have the Visual Studio .zip file template(s), copy those to your \Documents\Visual Studio 2010\Templates\ProjectTemplates\Visual C#.
  5. Open VS2010 and create a new project.  You will now see a project template as shown below.  The template name may change at some point.

image

 

The project structure will look like the following.

  • cordova – build tools
  • cordovalib – code for browser engine interaction
  • www – folder for html/js/css of your app
  • plugins – plugins for interfaces on your phone (i.e. camera, contacts)

image