Hosting QML online

Hosting QML files online is mostly the same as hosting any other types of static files on the web.

Simply copy your .qml files to your HTTP server, or your hosting provider, the same as you would do with any .html you host online.

Free hosting via GitHub#

You can host your QML directly via GitHub if you don't have access to private hosting. Just upload your qml files directly to a public repository and load the raw url in Canonic.

Make sure it is the raw url which you open in Canonic not the normal html url. You get the raw url by clicking the raw button when viewing a file in GitHub:

Here's a normal and raw url to show the difference:

type	url
normal	https://github.com/username/reponame/blob/main/path/to/qml-file.qml
raw	https://raw.githubusercontent.com/username/reponame/main/path/to/qml-file.qml

Things to look out for:#

1- Wrong content-type or file extension#

Canonic will try to render any file it loads from the web as QML if the file name ends with .qml or if it has a Content-Type of text/qml.

Since text/qml is not a standard content type recognised by most browsers your HTTP server will probably not set this correctly for you by default. Just something to keep in mind.

2 - Missing qmldir file#

If you do not have a qmldir file next to your QML files then relative type importing and relative module importing will not work!

qmldir files are simple text files that come in two forms:

Generally it's recommended to always have a qmldir file next to your qml files, even if you only have one qml file and it doesn't do any relative importing.

3 - Relative module imports#

Not all types of module import statements work when loading QML over a network.

The import statement is only network transparent if it has an "as" clause.

More specifically:

import "dir" only works on local file systems
import libraryUri only works on local file systems
import "dir" as D works network transparently
import libraryUrl as U works network transparently

Checkout the limitations section of the qml network transparency docs to find out more.

4 - Weird Module import errors?#

Getting weird errors when trying to import a module over the network?

Try adding a plugins.qmltypes file into the module.

It doesn't need to contain anything and honestly I'm not sure why it's required in WASM but not native network loading but it must please the Qt gods in one way or another so I recommend always including it.

If your still having trouble loading your QML files in Canonic feel free to let us know in the discord group and someone will be around to help.

Next#

Part 5 - Creating links