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 tried to use phonegap serve instead which has a live reload but it keeps sending me alerts and crashes my browser.

So, if you can please tell me how can I solve either of the two issues that will be wonderful.

Newsboy

Make sure that it executed from Www folder – Mimosa

Answer 1

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.

Gotthard

This plugin is out of date and broke my app. Is there an alternative? – Sonjasonnet

Also searching for an alternative – Daves

https://mcmap.net/q/688118/-how-to-add-live-reload-when-using-the-command-cordova-serve see my answer, i successfully use live reload feature with my cordova app. – Dissent

This plugin is valid for me and I should also needed to add cordova platform browser :) command is -cordova platform add browser- . – Scheme

Can livereload also be used on an android device? I need to do cordova run android everytime I make a change. – Jaimie

Answer 2

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.

Gleda

Cordova Browser Plugin install failed. I found this to be the easiest solution with npm install -g phonegap – Roose

This is, by far, the best solution in 2019 as browsersync is no longer maintained and archived – Ryder

but then in 2020, Phonegap will be shelved by Adobe.. – Hixon

Answer 3

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

Swatter

This plugin is taking about a minute to refresh the page. – Marya

Answer 4

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)

Pushball

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.

Dissent

Answer 6

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:

Ferneferneau

It doesn't refresh the page but re-runs the cordova run browser and after each change in different tab with a different port. i.e. each change opens a new port and a new tab. – Krefetz