Help using qmlweb with nodejs server

[boergerj]

Hello,

I have used qml for embedded and desktop applications but now I am working on a web development project and was overjoyed to find this repository. I'm having trouble using it however and was looking for guidance.

I'm trying to run a webpage from a raspberry pi using nodejs to create the server. I ran the npm install, created a basic html based on one of the examples and created a qml folder with a basic file there as well. When I run the server, I can see the html page populate as the head is present. However, I cannot see any qml populate the page. Any ideas of what is going wrong? Here is my file structure:
---project_folder
------ server.js
------ views
--------- index.html
--------- qml
------------ main.qml

[Plaristote]

Hi ! Word of warning: while this has been used in production projects already, it's still very much experimental: the implementation is pretty limited - for instance, we have near zero support for QtQuick.Controls 2, I've only started implementing it a couple o' weeks ago.
But it's always good to have people tinker around with this, so I dearly encourage you to take a look !

Your setup looks alright as far as I can tell. Note that we use shadow DOM, so you should at least see a #shadow-root element inside ... assuming the qml libraries loaded. Can you provide more details, like the contents of your index.html file ? You might've not included everything you needed.

For instance, you probably didn't inculde qmlweb-parser, which you will need if you intend to distribute your qml directly. But if that's what's happening, you would've seen an error in the debugger console.

Anyhow, I recommend using gulp-qmlweb (https://github.com/qmlweb/gulp-qmlweb). The last revision I made uses qrc files as inputs and outputs a single javascript file, including all your pre-parsed resources. QML resources passing through this process are pre-parsed (meaning you won't need to ship the parser along with your app anymore).
Then you just load that file from index.html, and refer to your main source as qrc:/main.qml instead of main.qml. Overall, it's a better way to ship your application, though it requires a bit more time to setup.

Last note: this project has been abandoned for around 4 years: I've only recently started working on it again. And I don't have the permissions to publish the new versions to NPM... but I've made some important patches lately, so I suggest referring to the github repository rather than the NPM package. That's valid for both qmlweb and gulp-qmlweb.