[SOLVED] f7v4-Vue-WebpackTemplate - Cordova


#1

Hello team,

Finally I have decide to give this ago. Previously, I have as possible tried to develop f7 apps relying on browser only.

I later add in a config.xml and use phonegap build to sort myself out.
However this has been completely inconveniencing, as I have to build for every small change that comes up, download and install on my phone which is somewhat time wasting plus phonegap build doesn’t afford me ability to even modify cordova plugins like I would love too.

So I have decided to start using webpack + vue to enjoy live reload and live app debugging.
I have cordova, Android Studio and Xcode all well set up. However, I am not sure how to live reload in an emulator.
Plus, cordova looks in 'www' folder for the index.html file. With webpack though, we have not index.html at the root of our folders.
The only way I am seeing is running an npm run build and then copy the contents of the built www into the cordova www and then running the cordova build command here to get the .apk file to run in my emulator.
This way however, I am not live reloading in the emulator and I think I just don’t know how to go about this.
I would like to know how one can set up a webpack cordova environment.
Thanks
@nolimits4web @pvtallulah


#2

Hi max,

I think there is no such thing as hot-reload on an apk/ipa. Or i didn’t find any. If you continue your research and find one, please let me know.

First when i start developing with PG (PhoneGap). I didn’t use Vue webpack, nothing just plain HTML CSS JS. and it works fine. I use the tool they provide.

https://phonegap.com/getstarted/

and it works fine.

Then i move to webpack + f7 + Vue. What i did was, make webpack to build to www folder instead of dist. In another console i run PhoneGap serve. But it was kind of buggy. Sometimes works sometime dosnt. Cordova dosnt like the fact that webpack build delete all the files.

Now what I’m doing is, have a "Skeleton apk/ipa" this apk calls a cdn with my compiled app.js and app.css. So i develop using chrome in mobile style. and when i want to see the result i compile (npm run build) and deploy to my cdn re-open my app, and the new app.js and app.css get pulled from my cdn. It’s not really hot-reload, but it works for me.

I know that this is not a solution. But maybe it help you on a different approach.


#3

Max, i made a cordova project with hot-reload. it working fine in mi Android. didn’t test it on iPhone.
if you want to try it here is the repo:


#4

Awesome bro! Let me try this tomorrow and will give you feedback. Thanks so much!:wink:


#5

Hello bro… Been deploying stuff lately, been busy! I checked the repo out, I think it’s better to stick to turning off cordova code in webpack, checking everything out in the browser as you dev, add in cordova, compile and build the project…

Then build an apk with cordova and test within the emulator… I have completely failed to see how cordova interacts with webpack… I need to keep researching though! Thanks meanwhile… Blessings!