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 soluti
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.