Skip to content

Instantly share code, notes, and snippets.

@morganrallen
Last active November 15, 2016 00:52
Show Gist options
  • Save morganrallen/0f8b11d730a2230be4aa8c8f2b3233a2 to your computer and use it in GitHub Desktop.
Save morganrallen/0f8b11d730a2230be4aa8c8f2b3233a2 to your computer and use it in GitHub Desktop.
This demonstrates my Cordova/Phonegap development flow using Chrome Inspector to minimize app rebuilds when only application code changes.
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HelloCordova</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev@cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="http://192.168.1.100:8000/index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
</widget>

Create App

$ cordova create test-app
Using detached cordova-create
Creating a new cordova project.
$ cd test-app/
$ cordova platform add android
$ npm init
$ npm install --save-dev ecstatic

Now you should change line 10 to match your laptop IP address. Next create symlinks for parts of the Cordova system.

$ cd www
$ ln -s ../platforms/android/platform_www/cordova.js .
$ ln -s ../platforms/android/platform_www/cordova_plugins.js .
$ ln -s ../platforms/android/platform_www/plugins/ . # even if it doesn't exist yet

This should have the app ready to be built and the server running.

$ cordova run --device
$ ./node_modules/.bin/ecstatic

Debugging

If everything has worked so far you should be able to open Chrome Inspector and see your app runnning. Click the inspect link and you'll find the familiar Chrome Dev Tools. Once you make local changes, you can use CTRL-R to refresh you app exacly like you'd with developing a web page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment