Cordova workflow

mbouclas

Does anyone have any suggestions on the best way to develop cordova apps? At the moment my workflow is dead slow, as i have to do a webpack build (so that the files will end up in the dist folder) which takes forever and then a cordovar run which again takes forever.

So for every little change it takes like 2 minutes to test it.There must be something like live reload, right?

rstoenescu

You can use Quasar Play app if you don’t use Cordova plugins in your app code.

icfr

if you have plugins you can change your config.xml to something like this

    <!-- <content src="index.html" /> -->
    <content src="http://ip.dev.pc:devport"

mbouclas

I found out that the fastest way is the microsoft cordova-simulate plugin in compination with webpack --watch.
webpack --watch writes files in dist, and the simulate plugin lifts a server simulating most cordova plugins. This way it feels like developing on chrome instead which is fine for like the 90% of any simple mobile app.

I did have to comment out this line in quasar-common if (Platform.is.cordova && !Platform.within.iframe) { in order for this to work. @rstoenescu is taking care of it though which means it will make things even simpler since we will be able to declare the platform at build

icfr

whit this you can just simulate in a browser and you will not see the real performace in the app

try my solution i build all my cordova app with this and it work well with hot reload

rstoenescu

Both ways to go are good, each with its strengths. Will enhance Quasar to be able to work with cordova-simulate too.

hurgadan

@icfr
Hi
Could you explain what does it mean and how it work?
Thank a lot

codingfriend

I’ve been using phonegap developer app, which already includes common plugins.

I made a watch script in quasar.

“watch”: “WATCH=true node build/script.build.js”,

//webpack.prod.conf.js
var watching = process.env.WATCH;
module.exports = merge(baseWebpackConfig, {
watch: watching ? true : false,

You can also disable some of the time consuming plugins in the build process if watching is true.

Then you install phonegap globally
npm install phonegap -g

In one terminal run
npm run watch

In another, cd into your cordova folder and run phonegap serve

Download the phonegap app and load your ip and port into the app and run it. This will allow you to preview your app as in production and see genuine plugin use. If you need more plugins than the default you can clone the phonegap developer repo and make a custom build. That will also allow you to see the logs.

However I’ve found one problem with this method, when the files change the phonegap app doesn’t reload like it normally does. You have to back out and jump back in. I think this is a difference in the way quasar is setup.Still the process takes just a few seconds to reload changes and you get to use plugins.

I was actually responding to ask for help on how to get phonegap app to sync with quasar.

codingfriend

Actually I solved my own problem. The fix is two steps.

Add a cordova.js script to your index.html
In webpack.prod.conf.js for html minify options set removeAttributeQuotes: false instead of true

codingfriend

I wrote a guide here.
https://medium.com/@codingfriend/how-to-live-reload-a-cordova-app-with-authentic-plugins-b38de27aaf3

No More Posting New Topics!

Cordova workflow