How to add Live Reload when using the command cordova serve?

Question

I am using this command to open up my app in the browser: cordova serve but it does not refresh itself when I update my code. How can I do that?

I have trie

Answer 1

Easiest solution is just to use phonegap serve instead of cordova serve. As long as you've got phonegap installed it'll work even if you built the app with just cordova.

phonegap serve gives you an IP address that will live reload and that you can access from the browser or the phonegap developers app. Both are very handy and actually work, which is always a plus.

Answer 2

You can also try cordova-plugin-browsersync-gen2. It's based on old abandoned plugin, fully compatible with latest versions of npm and Cordova.

Also, this version adds missing live-reload support for the following:

cordova run (for each platform individually)
cordova serve

Answer 3

The cordova-plugin-browsersync can be out-dated. Alternatively, you can use watch command like:

1. npm install watch --save-dev

2. Go to scripts line under the package.json file then add:

   "dev": "watch 'cordova run browser' www"

3. npm run dev

It will automatically refresh the page when you change anything under the www folder.

Sample screenshot:

Answer 4

You could try the Cordova Browsersync plugin. Instructions to use the plugin are in the plugin's repo.

Once you add this plugin using cordova plugin add cordova-plugin-browsersync, you can simply use cordova run -- --live-reload to start live reload. Note that this also enables syncing scrolls and clicks if you have multiple devices.

Answer 5

You can use browser-sync directly, without a cordova plugin. Follow below steps

• npm install -g browser-sync
• Copy contents of platform/android/platform_www to www
• Add following to config.xml: <allow-navigation href="http://<YOUR-IP>:3000" />
• Set base-href (if angular project) to http://<YOUR-IP>:3000/index.html
• Run browser-sync -w -server inside www
• Update content security policy for executing JS and assets from YOUR-IP:3000. Also allow webscokets (ws) for browser-sync
• Deploy app using cordova run android

Please note that you will have to redeploy the app every time you add a new plugin, and also update the www folder with new platform_www contents.

Every time you update the www, browser-sync will automatically notify your webview, and refresh the same. If you have to restart the app and connection with browser-sync is lost, connect device to computer and refresh the app using chrome device inspector, and browser-sync will be live again.

Answer 6

If you are using phonegap serve and you are seeing the JavaScript prompts, you need to add a snippet to prevent the app from loading the Native-level JavaScript code.

replace <script type="text/javascript" src="phonegap.js"></script> with

<script type="text/javascript">
    if (!navigator.userAgent.toLowerCase().match('chrome')) {
        document.write("<script src='phonegap.js'><\/script>");
    }
</script>

Note that this works for both cordova.js and phonegap.js (They should be the same file)