onsenui 2 + vue 2 template with custom debugger

mjessen

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?

raphox

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/

mjessen

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…

raphox

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

Andi

Unfortunately, the www content is the only one that can be executed on the debugger right now. We cannot execute the src code in the debugger as it would require something like webpack-dev-server on the debugger itself.
We also looked at the possibility to run monaca preview command and serve the local content managed by webpack-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.

Fran Diox

@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 in www and lets Monaca Debugger fetch the new changes.

vue init OnsenUI/vue-cordova-webpack projectName

mjessen

@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 and npm 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

Eric Hughes

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?

Fran Diox

@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.

Andi

@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.