How to set up Apache Cordova (PhoneGap) in Visual Studio Express Edition for Windows Phone

Introduction:

In the previous post, I had talked about the PhoneGap (Apache Cordova) platform and it's features. It's now time to advance a step further and set up an environment to start working on PhoneGap. You can set up an environment on the SDK of any platform supported by PhoneGap to start coding on the PhoneGap standards. As I use Microsoft Windows to develop applications for Windows Phone using the Visual Studio 2010 Express edition for Windows Phone (the Windows Phone SDK provided by Microsoft), I found it easier to start working on the same for PhoneGap too. Alternatively, you can set up PhoneGap on Eclipse too, if you are already developing for Android. If you don't have Eclipse or Android SDK or AVD installed, I would recommend you to set it up on Windows Phone SDK as it takes very few steps to set up and doesn't demand much of your time or knowledge to setup the platform. I have come across many websites that talk about how to start working on PhoneGap using Visual Studio 2010 Express Edition for Windows Phone. The authors of such articles say that just the installation of Visual Studio 2010 Express enables you to work on PhoneGap by directly starting a new PhoneGap project in Visual Studio itself. But when I installed my copy of the same Visual Studio, I couldn't find the pre-installed PhoneGap templates. When I searched on the web for the solution for this problem, I found that many users seem to face the same problem as well. I'm still trying to figure out which version of Visual Studio does or does not have the templates pre-installed. However, this article can be the starting point for either cases.

Requirements:

• Download the Windows Phone SDK from here: http://www.microsoft.com/en-us/download/details.aspx?id=27570 It includes Visual Studio Express for Windows Phone and the Windows Phone Emulator to test your app on the emulator. It also installs other packages like Silverlight and XNA Game Studio, which we won't be interested in.

• Download the PhoneGap 1.7.0 Release from here : https://github.com/phonegap/phonegap/zipball/1.7.0

Procedure:

• Install the Windows Phone SDK and after the installation is complete, run Visual Studio Express for Windows Phone (You can find it in Start > All Programs > Microsoft Visual Studio 2010 Express > Microsoft Visual Studio 2010 Express for Windows Phone.exe)

• Once you have started the Visual Studio, create a new project. If you have a PhoneGap template already installed, you can see it in the list of installed templates when you start a new project. If you see the following screen, it means that you have completed setting up PhoneGap on Visual Studio Express.

• If you see the above screen already, you are done with the installation of PhoneGap and that brings us to the end of this post. However, if you don't see the PhoneGap Starter template, read on and follow the instructions to set it up.

• Extract the ZIP archive that you downloaded from the PhoneGap website in the step two of requirements mentioned above. Navigate to the extracted folder and look for the "Windows" or "Windows Phone" directory and find the following ZIP archives inside it: Cordova-(Version Number)-Starter.zip and Cordova-(Version Number)-Custom.zip. 

• Copy these zip files from the folder to the templates folder of Visual Studio 2010. The target folder is located in your system at C:\Users\[USERNAME]\Documents\Visual Studio 2010\Templates\ProjectTemplates\

• Now, start Visual Studio 2010 Express (Close and restart if it is already running) and create a new project. You will now find the Cordova template(s) in the list of installed templates: 

That's it! You have set up PhoneGap on Visual Studio for Windows Phone! In the next post, I shall talk about creating a simple Hello World application using PhoneGap on Visual Studio.