PhoneGap is a great framework for creating cross platform apps (Android, iOS, BB, WM, etc.) using HTML, CSS, and JavaScript and uses Apache Cordova™. Installing and testing on Windows takes little setup, below I’ve tried to cover all of the steps needed to get going. My setup / guide below uses Windows 7, 64 bit, it seems like many steps, but in reality is pretty easy.
- Install node.js from nodejs.org (use default settings).
- Open a command prompt (cmd) and run:
- npm install -g phonegap
- npm install -g ant
- npm install –g cordova
- Now add ‘C:\Users\<yourusername>\AppData\Roaming\npm\node_modules\ant\ant\bin’ to the Path system variable
- Download and extract the Android SDK from https://developer.android.com/sdk/index.html
- I extracted to c:\mobile\androidsdk (referenced below as <yoursdkpath>)
- Add <yoursdkpath> + \sdk\platform-tools to the Path system variable
- Add <yoursdkpath> + \sdk\tools to the Path system variable
- Now to setup an Android image to emulate and test with:
- In the sdk folder, run Eclipse (ie: C:\mobile\androidsdk\eclipse\eclipse.exe
- Create or use the default workspace
- In Eclipse, under Window choose Android SDK Manager
- In the SDK Manager, make sure these are checked:
- i. Tools > SDK Tools, Platform-tools
- ii. Android <you choose the version> SDK Platform, Arm system image & Intel system image (if available)
- iii. Extras > Android Support Library, Google USB Driver, Intel x86 emulator HAXM
- Click Install x Packages, accept all licenses
- When downloads are finished, close the SDK Manager
- If you want to speed up the Android emulator, I suggest installing the Intel HAXM located at: \sdk\extras\intel\Hardware_Accelerated_Execution_Manager
- Now back in Eclipse (restart if you’ve installed the HAXM), you can go to Window > Android Virtual Device Manager.
- Click “New” to create a new virtual device
- Choose a name (anything you want)
- Choose a device (something simple like the “4.0” WVGA”)
- Choose a target (this is what you downloaded in step 4d).
- In CPU, choose Intel if it’s available (it’s not required, but if it’s not available, double check the HAXM install and the download the Intel system image for your target version)
- Now you can click “OK”
- In the list of virtual devices, choose your new device and click “Start”
- Provided you don’t see any errors, after a few minutes (be patient) you’ll have a working Android emulator going.
- Now, let’s do a quick project and test it! Go back to cmd (your command prompt).
- Create your project with, run: cordova create hello com.ex.hello “HelloChris”
- Go to the project directory, run: cd hello
- Add android to the project, run: cordova platform add android
- To make sure your project is ok, run: cordova build
- Now if you don’t already have your emulator running, go back into Eclipse into the Android Virtual Device Manager and start your device.
- When it’s running, run: cordova emulate android
- That’s it; you should see “your” app on the emulator in a few seconds. (It reads “device ready” with a logo or something…).
To get started creating your own app, browse to the folder (ie: \mobile\hello\www) and start editing and creating files. Enjoy!
Reblogged this on Sutoprise Avenue, A SutoCom Source.
LikeLike
This is the holy grail. Would have saved me an entire day if I found it earlier.
LikeLike
Glad to hear Joe. Good luck creating some awesome apps!
LikeLike
Also on Window 8.0 it seems that %SystemRoot%\System32 is not configured in the path by default. Consequently “cordova platform add” will throw an exception, having no known path to xcopy
And what am I doing developing on a Win8 machine? That’s a sad, sad story …
LikeLike
Interesting, good observation! Thanks man. Developing on Win 8: I see nothing wrong with it. I just hope you’re using a physical keyboard, not just touch screen. 🙂
LikeLike
[…] Setting up an AVD Their ‘instructions’ on how to set one up are a bit sketchy. Better instructions are available in Chris Bitting’s blog post. […]
LikeLike
To install cordova in cmd try it —- npm install -g cordova
LikeLike
are you maybe familiar with warnings like this (http://stackoverflow.com/questions/24799062/phonegap-3-5-0-version-warnings-in-opening-project)? I have followed your instructions but I installed only phonegap since I read on many pages that it is better to install just one, or am I wrong? After opening the project in Eclipse I got errors like I wrote in stackoverflow.
LikeLike
Julie, I wouldn’t worry about these warnings. As long as they don’t turn into errors.
Good luck with your project! Let me know if you run across any errors.
LikeLike
sir while running command “npm install -g phonegap” on cmd, i am getting soo many errors like npm error not ok code.
please help me sir in installing phonegap.
LikeLike
Try run your cmd as Administrator (Start -> type ‘cmd’ in search -> PPM -> run as Administrator
LikeLike
This is my error: failed to run “javac -version” make sure you have a Java JDK (not just a JRE) installed
LikeLike
[…] https://chrisbitting.com/2014/01/06/installing-starting-with-phonegap-on-windows-for-cross-platform-m… […]
LikeLike
i am already using android adt bundle eclipse. do i have to download adt another
for this
LikeLike
No, that install should be fine. I would just make sure it’s been updated recently.
LikeLike
Thanks for the steps. I am new to phonegap and gonna try the installation
LikeLike
Best of luck Arnold, you’re going to love it.
LikeLike
Hi Chris. Hope you are doing great. How do I open apps(calendar) on windows phone 8 with Cordova/PhoneGap. My development has come into a situation where my app needs to interact with other apps on Windows Phone 8.
Say when users click a button(in the Cordova which means it’s a html element) a windows phone 8 app will be opened(let’s say calendar).
I have searched many hours and only found calendar plugins for android and ios, there is really no one for WP platform?
LikeLike
Thank you so much for this. I’ve spent the last few days trying to figure this out and your tutorial helped me set it up.
LikeLike
[…] Installing & starting with PhoneGap on Windows for cross … – 19 Responses to “Installing & starting with PhoneGap on Windows for cross platform mobile development” Reblogged this on Sutoprise Avenue, A SutoCom Source…. […]
LikeLike
Hello i install node.js .and i type c:\>npm -g phonegap in node.exe
But it justing showing “……….”
Now what to do
Plz help me fast
LikeLike
What OS are you running?
LikeLike
Xp7
LikeLike
Windows 7
LikeLike
What do you get when you run “npm -v”?
LikeLike
Hello after installing node.js ..i typed c:\> npm install -g phonegap in node.exe
But it just showing …….. and nothing happing
LikeLike
Its showing 2.10.1
After typing npm -v
LikeLike
can you send me a link do that i can download phonegap.
LikeLike
I would start here: https://cordova.apache.org/#getstarted
LikeLike