onsenui 2 + vue 2 template with custom debugger

[mjessen]

Hi,

followed the instructions in this docs to create an onsenui 2 + vue 2 template on my computer which works pretty well (monaca demo, preview …). From my project folder i used “monaca upload” to upload and use the files in the monaca cloud because i want to create an custom monaca debugger to include all cordova plugins i need. All these steps are working fine.

My problem is that i can’t use the livereload properly because in the uploaded “www” folder is the already build version of the project. Is it possible to use the project “src” folder (with the .vue files) in the cloud or localkit for development and livereload of the custom debugger?

Thank you

[raphox]

When use command npm run dev you create a server with Express and Webpack runtime.

You need build (compile .vue files) client files with the command npm run build. This command generate compiled files in www.

Now you have production files in www. When you execute command cordova build android, this command get files in www and copy to platforms/android.

[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:

1. Create a project with vue init OnsenUI/vue-cordova-webpack projectName on my local machine
2. Run npm install and npm run build
3. Upload the project to the monaca cloud with monaca upload (only the “www” and “res” folder will be uploaded)
4. 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
5. Import the project from the cloud to the monaca localkit (new working directory)
6. 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…)
7. 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.