onsenui 2 + vue 2 template with custom debugger
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?
When use command
npm run devyou 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
Now you have production files in
www. When you execute command
cordova build android, this command get files in
wwwand copy to
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 devand debug on browser.
Maybe you considered use any of these https://play.google.com/store/search?q=cordova&c=apps
wwwcontent is the only one that can be executed on the debugger right now. We cannot execute the
srccode in the debugger as it would require something like
webpack-dev-serveron the debugger itself.
We also looked at the possibility to run
monaca previewcommand and serve the local content managed by
webpack-dev-serverinto 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 in
wwwand 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 projectNameon my local machine
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:watchto 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
Eric Hughes last edited by
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 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.