CODEWITHSUNDEEP
javascriptcordovawebpackcordova-plugins
AlphaDu
AlphaDu

Reputation: 81

How to make Cordova App Live Reload ，especially built by webpack and run in device or emulator

I'm new to use cordova.One way to live reload cordova app I know is to use plugin 'cordova-plugin-browsersync'.But My App was built by webpack,now I want to live reload in Browser,I must run 'webpack-dev-server' first and run 'cordova run browser -- --live-reload'.Can I achive the function to Live Reload more easy and debug live reload in emulator?

Upvotes: 5

Views: 5858

Answers (2)

caesay
caesay

Reputation: 17223

I used npm package live-server to handle the reloading for the browser platform. Have it watch the platforms/browser/www directory. Your build system likely has a watch mode, in which it can detect changes and output the compiled result as well. You also need to call cordova prepare after your build finishes, which can be achieved with nodemon.

To put it all together in a full example:

  • Have your source code in /src.
  • Run your build tool in watch mode (ex, webpack --watch, or parcel --watch) and output to /www
  • Run nodemon watching /www and have it run cordova prepare. The prepare command will copy your files from www to your platform directories.
    (ex: nodemon --watch www --exec \"cordova prepare\")
  • Run live-server watching the /platforms/browser/www folder
  • Viola!

This results in a semi-fast live-reload environment with cordova in the browser platform. As this is a lot of things to run at once, you can run all of your scripts in parallel using npm-run-all.

A final script in package.json might look like this:

"scripts": {
    "live-build": "webpack --watch --output-path=www ....",
    "live-watch": "nodemon --watch www --exec \"cordova prepare\" --ext html,css,js",
    "live-serve": "live-server --watch=\"platforms/browser/www\"",
    "start": "npm-run-all -c -n -l -p live-build live-watch live-serve"
}

And then you'd just call npm start to run your entire live-reload environment. This will need to be tweaked for your specific project but should give you a general idea of how it could be accomplished.

Upvotes: 2

sandorvasas
sandorvasas

Reputation: 37

I just ran into the same problem and yet haven't found a ready solution, so below is what I did and further steps of my plan to solve it.

I've downloaded cordova-plugin-browsersync

cordova plugin add cordova-plugin-browsersync didn't work, so I manually copied it to plugins folder, updated cordova's package.json and installed the plugin's node modules from cordova-plugin-browsersync folder.

After that the app seems to update pretty fast if anything is modified in the www folder.

Now have to solve how to output intermediate bundle files from webpack-dev-server, which it doesn't do by default. I've found write-file-webpack-plugin, but it's not outputting all the files to the build folder, so might not work very well for this purpose.

So my plan is to

  1. create a webpack.config.cordova.js file where code compression is off
  2. setup any app that watches the src folder and calls a node.js script
  3. which script programmatically compiles with that webpack config, outputting to cordova's www/

Upvotes: 0

Related Questions