Using the PhoneGap Developer App with a Cordova for Visual Studio Project
I got an excellent question from a reader on my previous post (The Multi-Device Hybrid Apps extension for Visual Studio Kinda Rocks) about whether you can use the PhoneGap Developer App with an Apache Cordova for Visual Studio 2013 project. This was a particularly excellent question because I didn’t know the answer, which gave me an excuse to play around a bit.
For those of you not familiar with Apache Cordova Tools for Visual Studio 2013, it enables you to work with a cross-platform JavaScript-based Cordova project using the Visual Studio IDE, which you can build and deploy to the various native device platforms. For more information, see my previous post (which is now a little bit stale with the new CTP out).
The PhoneGap Developer App
For those of you not familiar with it, the PhoneGap Developer app is a native device app, available for iOS, Android and Windows Phone, that enables you to run a PhoneGap/Cordova app on a remote device from local sources. To do this, you start a PhoneGap server from the Cordova project on the local machine with this simple command:
phonegap serve
This fires-up an app server to listen a port on your local machine, which is declared in the output. You then run the PhoneGap Developer app on your target device and see this:
Enter the IP address and port declared by the server, click connect and Boom! Your current Cordova/PhoneGap project is deployed to the device and started. The server also detects when you make changes to the source project files and redeploys them automatically to the device and restarts the app.
Note that the Apache Cordova Tools CTP already provides the ability to deploy to and debug on a remote MacOX machine (since Xcode only runs on a Mac). However, the point of the PhoneGap Developer app is that it drops the project files right onto your remote device and starts your app on the device.
To be honest, I’m not actually sure whether the communication between the device and computer is secure, but I was only running this on my private network—I probably wouldn’t do it on an insecure network.
What I did to make it work for a Visual Studio project
The Apache Cordova Tools for Visual Studio essentially provide a functional wrapper around the core Cordova functionality to enable easier (non-command-line) project configuring and debugging. This means that when you build a Cordova app, Visual Studio generates a complete Cordova project in the build output folder. Since this is a clean Cordova project (without any Visual Studio stuff), I focused on this output to get the PhoneGap Developer App working. You can see the \bld\Build folder is where the Cordova project files are generated when the Visual Studio project is built (in addition to the platform-specific debugging stuff).
Note that I circled the .cordova folder. That is because this folder, which contains a config.json file that points to the com.phonegap.helloworld app, is not generated by the Visual Studio build. However, you apparently need it to be able to use the PhoneGap Developer app. I simply copied this folder manually from a PhoneGap project that I created using the following command:
$ phonegap create myapp
Of course, I already had the phonegap npm package installed. In fact, I just basically followed the instructions on the PhoneGap Developer app site. At this point, all I had to do was navigate to the bld\Debug folder of my project and execute the phonegap serve command, then connect with the app on the device. My project was deployed and the app popped-right up on the device.
It worked—sort of
The good news is that I was able to use the PhoneGap Developer app to deploy and run the basic “hello world” project that is found in the Cordova app template in Visual Studio 2013. I was also able to make changes to the source code, build the project, and witness the updated files being sent to the device and my app being restarted. For the bare-bones app, this all worked great, maybe better than expected.
Now, the bad news. I also tried to use the app with a more complex project, one with multiple plugins and that accessed Azure Mobile Services. This project also deployed OK, but it timed-out before the deviceready event occurred. It seems like this project will take more messing with to figure out what’s going on. However, I think as a PoC, the experiment was a success…you definitely can use the PhoneGap Developer app with a Visual Studio-based Cordova project.
Cheers!
Glenn Gailey
Comments
Anonymous
December 14, 2014
Glenn - great post and some good news: we have work scheduled in the next few months to bring our project system in closer alignment with the file system which will ultimately improve compatibility with other CLIs like PhoneGap, Ionic, etc. You've clearly provided developers with a path to make it work today. In the near future, our goal is to make it work with zero work-arounds. Stay tuned and follow the product team on Twitter for future updates: @vscordovatools or me @ryanjsalvaAnonymous
December 15, 2014
The comment has been removedAnonymous
January 01, 2015
Nice work here.Anonymous
September 29, 2015
Hi Glenn I'm look for docs and tutorial for use Azure push notification from Cordova HTML5 app. I'm oly looking for th javascript call for make it, nothing more. But I doesen't find nothing. Very strange. Can you help me? Fabio