How to live reload a cordova app with authentic plugins

Cordova development can potentially be very slow. First you have to make your changes, compile your app, run cordova build android copy that file to your device somehow and then install and launch it. For making quick changes this quickly becomes exasperating.

Quasar Framework attempts to fix this by adding webpack live reload allowing you to make changes to your files and see real time reloads using the quasar app. This is a great fix as long as you don’t need cordova plugins. If you are wanting to use the barcode scanner, or camera, or device orientation you will have to build the app fully and upload it to your device. And that’s pretty slow.

I’ve found a known work around to speed this up and want to take you through the steps of how you can live reload your cordova app with Quasar Framework and include authentic plugins (not the mock plugins).

PhoneGap Developer App to the rescue

PhoneGap has made a developer app that allows you to download your cordova app files and run them on your device and use pre-installed plugins. However this app has a couple drawbacks.

1. It only includes the most commonly used plugins. If your app needs a specific plugin you won’t be able to use it.
2. It currently doesn’t show android logs (such as in chrome debug) without more setup.

We are going to fix both of these problems by doing a custom android build of PhoneGap Developer App.

Steps

1. Clone the phonegap repo

git clone https://github.com/phonegap/phonegap-app-developer.git

2. In the config.xml change the widget id="com.adobe.phonegap.app" to your own name.

3. In google-services.json change the package_name to match your widget id.

"client_info": {
  "mobilesdk_app_id": "1:996231231186:android:845d258a77ddcab7",
  "android_client_info": {
    "package_name": "com.adobe.phonegap.app"
  }
},

4. Run npm install

5. Add android as a build platform (this step should go after you’ve changed the widget id and package_name or else you will have to update the id in the AndroidManifest.xml.

cordova platform add android

6. Now install the plugins your app will need to use with cordova plugins add plugin-name. I recommend cordova-plugin-console, so you can see console.logs in your terminal.

7. Run cordova build android. Mine paused on the com.wikitude.phonegap.WikitudePlugin so you can remove it from the config.xml and package.json. I’m not certain this is a good fix, so try at your own risk.

//config.xml
<plugin name="com.wikitude.phonegap.WikitudePlugin" spec="https://github.com/timkim/wikitude-cordova-plugin.git" />
//package.json
"com.wikitude.phonegap.WikitudePlugin": "https://github.com/timkim/wikitude-cordova-plugin.git",
"wikitude-plugin-phonegap-dev-app": "git+https://github.com/timkim/wikitude-cordova-plugin.git"

8. Now you can build the android file and deliver the android-debug.apk file to your phone and install it.

For better explanation visit

http://docs.phonegap.com/references/developer-app/custom-build/ios/

Quasar Build

In your quasar app you will need to make a couple changes to speed up development and fix a couple bugs.

1. In your package.json add this to your scripts

"watch": "WATCH=true node build/script.build.js",

In your build/webpack.prod.conf.js add watch: true if the variable is set and optionally load slow optimizations.

var
  path = require('path'),
  config = require('../config'),
  cssUtils = require('./css-utils'),
  webpack = require('webpack'),
  merge = require('webpack-merge'),
  baseWebpackConfig = require('./webpack.base.conf'),
  ExtractTextPlugin = require('extract-text-webpack-plugin'),
  HtmlWebpackPlugin = require('html-webpack-plugin'),
  OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin'),
  CleanObsoleteChunks = require('webpack-clean-obsolete-chunks')
var watching = process.env.WATCH;
var plugins = []
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
plugins.push(new OptimizeCSSPlugin({
  cssProcessorOptions: {
    safe: true
  }
}))
// extract css into its own file
plugins.push(new ExtractTextPlugin({
  filename: '[name].[contenthash].css'
}))
plugins.push(new HtmlWebpackPlugin({
  filename: path.resolve(__dirname, '../dist/index.html'),
  template: 'src/index.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: false
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency'
}))
// plugins.push(new CleanObsoleteChunks())
if(!watching) {
  plugins.push(new webpack.optimize.UglifyJsPlugin({
    sourceMap: config.build.productionSourceMap,
    minimize: true,
    compress: {
      warnings: false
    }
  }))
// extract webpack runtime and module manifest to its own file in order to
  // prevent vendor hash from being updated whenever app bundle is updated
// split vendor js into its own file
  plugins.push(new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: function (module, count) {
      // any required modules inside node_modules are extracted to vendor
      return (
        module.resource &&
        /\.js$/.test(module.resource) &&
        (
          module.resource.indexOf('quasar') > -1 ||
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      )
    }
  }))
plugins.push(new webpack.optimize.CommonsChunkPlugin({
    name: 'manifest',
    chunks: ['vendor']
  }))
}
module.exports = merge(baseWebpackConfig, {
  watch: watching ? true : false,
  module: {
    rules: cssUtils.styleRules({
      sourceMap: config.build.productionSourceMap,
      extract: true,
      postcss: true
    })
  },
  devtool: config.build.productionSourceMap ? '#source-map' : false,
  plugins: plugins
})

Now you can run npm run watch in your quasar app root folder to live build your app.

2. We need to link cordova.js to our src/index.html file.

<div id="q-app"></div>
<script type="text/javascript" src="cordova.js"></script>
<!-- built files will be auto injected -->

3. In your html minify options in webpack.prod.conf.js set removeAttributeQuotes: false. Otherwise your app won’t automatically reload between changes.

4. Run npm install phonegap -g and cd into your cordova folder.

5. Run phonegap serve.

Now run the phonegap developer app you built. Type in the ip address and port you got from phonegap serve and your app should load in the view.

Your app should now live reload after your make code changes and you can use genuine plugins that you installed in the phonegap custom developer app. If you need more plugins just add them to the code and rebuild android-debug.apk and install on your phone.

You can see logs by watching the phonegap serve terminal or connecting your phone to your computer via usb and visiting

chrome://inspect/#devices

From there you can find your device and inspect a currently running app as if it were on your computer.

It took me about 11 seconds between saving my changes and seeing them in the phone. I can also test my plugins quickly.

Hope this helps!