Menu
Just started to check the workflow of developing cordova apps with Visual Studio 2015.
My question is, when debugging on actual android devices (assuming ver > 4.4) is there a way to achieve "live reload" (making changes in JS/CSS/HTML and these become active without restarting build process). I can undestand that adding/removing plugins from the project would be much more an issue for a live reload (due to native code that needs to be built) but for our javascript code, wouldn't that be just updating files on target? I don't really care for the automation of updating target without user interaction, i just need to avoid the time consuming rebuilding process, when frequent minor changes are needed. I read Ionic framework does that already, but do one needs to have ionic to do that? I also have seen/tested that with phonegap, but i prefer not go this way.
I am green in this, but i would assume that live reload would just involve a static http server pointing to our sources (managing the 'virtual' cordova.js and the like) plus something like changing the project's starting html to point to our server rather than the file (or even a 'reload' button on our app). Isnt that the case? I guess im wrong somewhere, otherwise i would expect to see that as V/S standard issue. Just saying. If not a V/S thing, is there a tool/plugin out there to install for that?
Sorry for long question/post. Comments/directions much appreciated
237
Remember ionic serve ? That was Live Reload working in the browser, allowing us to iterate quickly. We can also use it when developing on iOS and Android devices.
Select Add new app from the menu. Enter a name for your application project, adding an optional description as needed. Select the appropriate OS for your application project (Android or iOS only), then select the Cordova platform option. Click the Add new app button on the bottom-right corner of the page.
After looking around a bit, i decided to create a simple solution that solves this and i am posting this for everyone that cares to do the same. All we need is a static http file server that points to android build directory:
<project_folder>/platforms/android/assets/www
It so happens that after a successful build, the folder has all files to serve, including cordova.js, cordova_plugins.js and the whole plugins folder with their javascript files.
Since node is present, it is easy to make a 'quick' http server with node/express. Here is the script i drafted (feel free to modify for your needs).
livesrv.js:
var express = require('express');
var server = express();
var http = require('http').Server(server);
var port = 80;
var static_root = process.argv[2] || '<YOUR_PROJECT_FOLDER>/platforms/android/assets/www';
server.all('/*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
server.use(function(req, res, next)
{
console.log('--> '+req.url);
if(req.url.match(/(.png|.jpg|.jpeg|.svg|.woff|.woff2|.ttf|.otf|.eot)/)) {
res.header('Cache-Control', 'max-age=691200');
} else {
res.header('Cache-Control', 'max-age=0, no-cache, no-store, must-revalidate');
res.header('Pragma', 'no-cache');
res.header('Expires', 'Thu, 01 Jan 1970 00:00:01 GMT');
}
next();
});
server.use(express.static(static_root));
http.listen(port, function() {
console.log("startup: server started @ port " + port + ", root:"+static_root);
});
When you start this node app, your project files (js/css/html) are visible for live updates from your device (WARNING: this exposes your sources, so you must have some idea what you are doing before using this script). For those who need more detailed instructions:
node livesrv <your_project_folder>/platforms/android/assets/www
Next step: change the config.xml your project's starting HTML to point in another HTML file (in this case i chose 'main.html')
Create `main.html' which is nothing more than a 'bootstrap' for server.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Security-Policy" content="">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
</head>
<body>
<script>
console.log("Starting..");
setTimeout(function () {
console.log("Booting app..");
window.location.href = "http://<YOUR_SERVER_IP>/index.html";
}, 200);
</script>
</body>
</html>
All this does is that loads the `index.html' from server. Dont forget to update the YOUR_SERVER_IP with your own (the ip address of the host that runs the node server).
Last step: I put in my webapp a button somewhere (you can use a 'static' part of the app, for example a permanent logo if you have such), that allows you to trigger a reload.
$('#mylogo').on('click', function () {
console.log("Reloading..");
window.location.reload();
});
And that worked for me. After initial build/install, everytime i press the logo the app is reloading the (updated) content from server so no need to rebuild. Try this and let me know if it works for you. Dont forget to allow the device connection with the server (ie: enable the wifi!)
To release the app, change back the starting point to index.html and remove the reload button.
Downsides/restrictions:
Benefits:
I may have overlooked some things, especially if there are ready services that i could use to achieve this, so if you know anything that simplifies this please let me know. So feel free to critisize all the above as i am very interested to read your ideas. Btw, if anyone cared to make this a plugin of V/S, i would really love to use it.
Cheers!
101
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With