onsenui 2 + vue 2 template with custom debugger
-
Thank you. I know these commands and the express + webpack runtime server but that is not a solution for me. I am using cordova plugins (e.g. sqlite plugin) in my project which are not working with
npm run dev
. I need a custom monaca debugger with the uncompiled files to use the great livereload tool.My problem is that i can’t upload the uncompiled files to the monaca cloud to create the custom monaca debugger. So, i am wonderung if there is a solution to use the uncompiled files in a custom monaca debugger?
-
I never use Monaca cloud services. Maybe its possible.
But when I want debug my apps I build and use Android Studio to launch my app on mobile device. See more in http://cordova.apache.org/docs/en/dev/guide/platforms/android/index.html#debugging
And after I can access browser console with https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
-
That’s how i debug my apps right now. Do you know any kind of livereload of the app after saving changes in the code? Thats why i want to use the custom monaca debugger. The livereload of the debugger is much faster than the build with android studio…
-
Sorry @mjessen . This is all that I know.
Until today, I use simply native features. Many times I use the device deploy only for test splitscreen, cam and broken layout. For this, I dont need livereload on device, for other, I use
npm run dev
and debug on browser.Maybe you considered use any of these https://play.google.com/store/search?q=cordova&c=apps
-
Unfortunately, the
www
content is the only one that can be executed on the debugger right now. We cannot execute thesrc
code in the debugger as it would require something likewebpack-dev-server
on the debugger itself.
We also looked at the possibility to runmonaca preview
command and serve the local content managed bywebpack-dev-server
into the debugger, but it seems that it’s hosted in memory during the execution so we cannot do it. We will surely take a look once again in the future.
-
@mjessen If you use Vue CLI template (OnsenUI/vue-cordova-webpack) instead, you’ll be able to run
npm run build:watch
. This automatically generates files inwww
and lets Monaca Debugger fetch the new changes.vue init OnsenUI/vue-cordova-webpack projectName
-
@Andi thank you for the information.
@Fran-Diox thank you, with one extra step it works out. This is my workflow:
- Create a project with
vue init OnsenUI/vue-cordova-webpack projectName
on my local machine - Run
npm install
andnpm run build
- Upload the project to the monaca cloud with
monaca upload
(only the “www” and “res” folder will be uploaded) - Create the custom monaca debugger (in case you want to use a cordova plugin which is not included in the monaca debugger) and install it on my android device
- Import the project from the cloud to the monaca localkit (new working directory)
- Copy all files wich are needed for
npm run build:watch
to the new working directory because they are not included in the cloud (this is the extra step…) - Open the project in the custom debugger and run
npm run build:watch
. As you mentioned all changes in the “src” folder will automatically generate the files in the “www” folder and fetch the debugger if the livereload in activated.
If you see a better way, please let me know
- Create a project with
-
i dont understand you have to upload to monaca cloud after every time you want to check a change on your phone?
my current situation is that we have a webpack project using vue and onsen
we use 1 shell to run npm run build:watch and another to grab that with monaca debug. but the debugger says that this project is a different cordova version than this debugger. there may be some issues during the execution. this is for ios i have not tried it with android yet. is there any way to preview what the app looks like on the phone without uploading?
-
@Eric-Hughes You can use the debugger locally with a USB and Monaca CLI or LocalKit. Not sure about Cordova’s version, perhaps @Andi knows more about it.
-
@Eric-Hughes Monaca Debugger currently uses Cordova 6.2 as default version. A Cordova 6.5 update is expected very very soon but we suggest you to stick with the default Cordova version or an older supported version (by building a custom debugger). Newer versions will likely be affected by issues.