CODEWITHSUNDEEP
cordovaphonegap-plugins
Matan Gubkin
Matan Gubkin

Reputation: 3099

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

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.

Upvotes: 17

Views: 44706

Answers (6)

erdemgunenc
erdemgunenc

Reputation: 997

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:

enter image description here

Upvotes: 0

DnR
DnR

Reputation: 116

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

Upvotes: 5

rjv
rjv

Reputation: 6776

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.

Upvotes: 2

axemclion
axemclion

Reputation: 562

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.

Upvotes: 23

hobberwickey
hobberwickey

Reputation: 6414

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.

Upvotes: 17

Cheruvian
Cheruvian

Reputation: 5877

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)

Upvotes: 4

Related Questions