How can I use ES6/ES2015 with live reloading with Apache Cordova?

Question

I have been using ES6/ES2015 for a project, transpiling to ES5 via Babel(ify) and bundling with Browserify all via budo. This provides a nice workflow wherein a change to a ES6 file is detected, transpiling, and incremental bundling are done in memory without any file I/O and the browser is told to refresh.

I am new to Cordova and am trying to get a similar workflow working where the browser is replaced with the native iOS/Android in-app browser reloading on changes.

I've setup my config.xml to have a content element using "http://192.168.1.8:9966/index.html" which is the IP of my laptop running budo.

I think there's a "cordova prepare" needed somewhere but I'm not sure how to integrate this or if budo needs to have copies of cordova.js or something. That I am fuzzy on...

• https://cordova.apache.org/docs/en/5.1.1/config_ref/index.html#link-1
• https://github.com/mattdesl/budo
• https://babeljs.io/
• http://browserify.org/

Plugins being used:

com.telerik.plugins.wkwebview 0.6.5 "WKWebView Polyfill"
cordova-plugin-battery-status 1.1.0 "Battery"
cordova-plugin-camera 1.2.0 "Camera"
cordova-plugin-console 1.0.1 "Console"
cordova-plugin-dialogs 1.1.1 "Notification"
cordova-plugin-file 3.0.0 "File"
cordova-plugin-file-transfer 1.3.0 "File Transfer"
cordova-plugin-geolocation 1.0.1 "Geolocation"
cordova-plugin-globalization 1.0.1 "Globalization"
cordova-plugin-inappbrowser 1.0.1 "InAppBrowser"
cordova-plugin-network-information 1.0.1 "Network Information"
cordova-plugin-splashscreen 2.1.0 "Splashscreen"
cordova-plugin-webserver 1.0.3 "CordovaWebServer"
cordova-plugin-whitelist 1.0.0 "Whitelist"

I have no errors in the iOS simulator log (Debug > System Log).

Anyone have live reload working for ES6 and Cordova? Thanks!

Answer 1

OK I figured this out. No one seems to be going this route but it's pretty awesome.

Live Reload with Cordova via Budo, Babel, and Browserify

Assumptions

• your dev machine has an IP of 192.168.1.8
• your app's entry point or main file is src/main.js
• your Cordova app's root dir is app

---

Budo

Run budo. Budo will also inject a script tag that talks to its LiveReload server. All of your transpiled and bundled ES5 code will be served will be from path "js/bundle.js".

budo src/main.js:js/bundle.js \
--dir=app/www \
--live="app/www/**/*" \
-t babelify | garnish

---

Config.xml

Development version

Update your Cordova app's config.xml, setting the content element's src property to load the app content (e.g. index.html) from your budo instance instead of the local filesystem.

<content src="http://192.168.1.8:9966/index.html" />

Production version

<content src="index.html" />

This loads the config from the filesystem as normal.

---

Index.html

Split your app/www/index.html file into 2 versions: development and production. Switch between them with a shell script or similar.

Both versions of index.html reference js/bundle.js via a script tag.

Development index.html

The development version of index.html needs to load the cordova.js and cordova_plugins.js as well.

In my case, I am using iOS9 and the Telerik plugin that enables WKWebView. This plugin serves assets with an internal httpd to workaround an iOS bug and can be found at http://localhost:1234. Thus, I simply load cordova.js and cordova_plugins.js from there.

<script type="text/javascript" src="http://localhost:12344/cordova.js"></script>
<script type="text/javascript" src="http://localhost:12344/cordova_plugins.js"></script>

Thus, your development index.html should have a Content Security Policy that allows for all of these things to be loaded.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' http://localhost:12344 http://192.168.1.8:*; connect-src 'self' ws://192.168.1.8:*" />

In other cases (e.g. Android), you will likely have to fiddle with symlinks and hooks.

Production index.html

You only need to load the js/bundle.js and do not need the Content Security Policy entries that reference 192.168.1.8.

---

Live Reload / Making Changes

When you edit a ES2015 file referenced (in)directly by src/main.js, Budo will notice the change, transpile, bundle, and then notify the client via a WebSockets connection created the LiveReload injected script.

Make changes to app/www/css/index.css (or use SASS/LESS etc and have those write to index.css). Budo will notice and will send down changes to be realized without a page reload.

Make changes to app/www/index.html and Budo will notice and send those changes down via its LiveReload server.

---

Notes

• deviceready will only fire once as you might expect, not on every change to a ES2015 file.
• Adding/removing plugins or changes to config.xml are to be realized with a rebuild: cordova run ios.
• If you periodically see a file being cached after a build, clean the project and rebuild: cordova clean ios.

---

Telerik's WKWebView Plugin

If you are using the Telerik WKWebView plugin, use the latest from github instead of NPM.

cordova plugin add https://github.com/Telerik-Verified-Plugins/WKWebView

There's a bug in the plugin code currently that mishandles loading of http-based content (start page). I have a pull request for this pending (Oct 27 2015).

Answer 2

@Johnny,
Welcome to the Cordova/Phonegap world. The answer you are looking for is to use the "hooks". This was design so you can add stuff to your workflow.

You can add or control, I quote:

before_build
before_clean
before_compile
before_docs
before_emulate
before_platform_add
before_platform_rm/
before_platform_ls
:::
before_prepare
(and more)

You should also read: Top Mistakes by Developers new to Cordova/Phonegap

I am updating it next weekend. This weekend I am working on a blog on whitelist, which has become a thorn in development.

FWIW: I am also working on a web components blog, but it is weeks away. My main blog is: http://codesnippets.altervista.org/blog/

On live reload there are several developments right now. Phonegap has one named "hydration". Iconic has one, and so does MobileFirst (IBM). Right now a decent working "live reload" is badly needed. I have not had time to check any of the newer ones (whos names don't come to mind)

Best of Luck