Cordova hot reloading on device without Ionic

Question

I'm using Cordova without Ionic or any other Framework. My problem is that I don't find any hot reload features or plugins for Cordova without using Ionic. Is there any solution to live reload on the iOS simulator without any frameworks?

Answer 1

I've implemented a custom way of 'hot reloading' in Cordova. I don't know how original it is but it works well for my needs. In broad lines it works like this: in development mode a static webserver is started and cordova is instructed that the content is the url of this server: <content src="http://10.0.3.2:8080" />.

The static server also listens to changes in the assets (js/css/html) and auto reloads. We use gulp connect (https://www.npmjs.com/package/gulp-connect) to achieve this.

In production mode you have to compile the assets and instruct cordova to use the regular static file to load your app.

Details:

In cordova.xml this is the line that tells cordova where to start the app:

<content src="index.html" />

So this has to be replaced with a 'dynamic' version that would allow hot reload. I achieved this by using gulp-connect which starts a static file server.

  gulp.task('connect', function () {
    return connect.server({
      root: 'www',
      livereload: true,
      fallback: 'www/index.html',
      https: false
    });
  });

I created two tasks which switch the cordova configuration in development and in production:

  // Development
  // adds the localhost(on the emulator as 10.0.3.2) as
  // the content source for the cordova app
  gulp.task('cordova-dev-server-android', function () {
    return gulp.src(['config.xml'])
      .pipe(replace(/(<content src=\")(.+)(\" \/>)/g, "$1http://10.0.3.2:8080$3"))
      .pipe(gulp.dest('.'));
  });

  // Production
  // adds the static file as
  // the content source for the cordova app
  gulp.task('cordova-static-file', function () {
    return gulp.src(['config.xml'])
      .pipe(replace(/(<content src=\")(.+)(\" \/>)/g, "$1index.html$3"))
      .pipe(gulp.dest('.'));
  });

One important thing you have to ensure that the Cordova javascript files are accessible by the development web server. Again, I achieved this with two tasks for development/production.

  // Development
  // Creates symlinks for the devserver
  // so the app has access to cordova files
  gulp.task('create-cordova-symlink-android', ['remove-cordova-symlink'], function () {
    return gulp.src('')
      .pipe(exec('ln -sv ../platforms/android/assets/www/cordova.js www'))
      .pipe(exec.reporter())
      .pipe(exec('ln -sv ../platforms/android/assets/www/cordova_plugins.js www'))
      .pipe(exec.reporter())
      .pipe(exec('ln -sv ../platforms/android/assets/www/plugins www'))
      .pipe(exec.reporter());
  }); 


  // Production
  // Removes symlinks for production
  // see create-cordova-symlink-android
  gulp.task('remove-cordova-symlink', function () {
    var options = {
      continueOnError: true
    };
    return gulp.src('')
      .pipe(exec('rm www/cordova.js', options))
      .pipe(exec('rm www/cordova_plugins.js', options))
      .pipe(exec('rm -Rf www/plugins', options));
  });

I am using gulp here but this can be implemented using any task runner, and of course for other platforms you have to modify this code a bit.

Hope this helps.