Linux experts Seravo background Linux Debian SUSE
Seravo blog: Linux and open source – technology and strategy

Optimal Sailfish SDK workflow with QML auto-reloading

SailfishOS IDE open. Just press Ctrl+S to save and see app reloading!

SailfishOS IDE open. Just press Ctrl+S to save and see app reloading!

Sailfish is the Linux based operating system used in Jolla phones. Those who develop apps for Jolla use the Sailfish SDK (software development kit), which is basically a customized version of Qt Creator. Sailfish OS apps are written using the Qt libraries and typically in the C++ programming language. The user interfaces of Sailfish apps are however written in a declarative language called QML. The syntax of QML is a custom markup language and includes a subset of CSS and JavaScript to define style and actions. QML files are not compiled but stay as plain text files when distributed with the app binaries and are interpreted at run-time.

While SailfishOS IDE (Qt Creator) is probably pretty good for C++ programming with Qt libraries, and the Sailfish flavour comes nicely bundled with complete Sailfish OS instances as virtual machines (one for building binaries and one for emulating running the binaries) the overall workflow is not very optimal from a QML development point of view. Each time a developer presses the Play button to launch his app, Qt Creator builds the app from scratch, packages it, deploys it on the emulator (or a real device if set up to do so) and only then actually runs the app. After doing some changes to the source code, the developer needs to remember to press Stop and then press Play to build, deploy and start the app again. Even on a super fast machine this cycle takes at least 10 seconds.

It would be a much more optimal workflow if relaunching the app after QML source code changes would happen in only 1 second or even less. Using Entr it is possible.

Enter Entr

Entr is an multi platform app which uses the operating system facilities to watch for file changes and to run a command the instant a watched file is changed. To install Entr on a Sailfish OS emulator or device, ssh to the emulator or device, add the community repository chum and install the package entr with (Note the chum for 1.0.5.16 also exists, but the repo is empty.):

ssh nemo@xxx.xxx.xxx.xxx
ssu ar chum http://repo.merproject.org/obs/sailfishos:/chum:/1.0.4.20/1.0.4.20_armv7hl/
pkcon refresh
pkcon install entr

After this change to the directory where your app and it’s QML files reside and run entr:

cd /usr/share/harbour-seravo-news/qml/
find . -name *.qml | entr -r /usr/bin/harbour-seravo-news

The find command will make sure all QML files in current or any subdirectory will be watched. Running entr with parameter -r will make sure it kills the program before running it again. The name of our app in this example here is seravo-news (available in the Jolla store if you are interested).

With this the app would automatically reload it any of the QML files change. To do this mount the app directory on the emulator (or device) to your local system using SSH:

mkdir mountpoint
sshfs nemo@xxx.xxx.xxx.xxx:/usr/share/harbour-seravo-news mountpoint/

Then finally open Qt Creator, point it to the files in the mountpoint directory and start editing. Every time you’ve edited QML files and you feel like you want to see how the result looks like, simply press Ctrl+S to save and watch the magic! It’s even easier than what web developers are used to do then pressing F5 to reload, because on the emulator (or device) there is nothing you need to do, just look at it while the app auto-restarts directly.

Remember to copy or directly git commit your files from the mountpoint directory when you’re completed writing the QML files.

Entr has been packaged for SailfishOS by Seravo staff. Subscribe to our blog to get notified when we post about how to package and build RPM packages using the Open Build System and submit them for inclusion in SailfishOS Chum repository.

8 thoughts on “Optimal Sailfish SDK workflow with QML auto-reloading

  1. Bojan says:

    Sorry, but this is not working:
    Command failed: This tool could not find any available package: could not find entr.

    Best regards.

  2. Bojan says:

    OK, i finally make it work.
    1. you need to install entr on real device. There is no package for emulator.
    2. find . -name *.qml | entr -r /usr/bin/harbour-seravo-news needs to be find . -name “*.qml” | entr -r /usr/bin/harbour-seravo-news for recursion search
    3. chmod 777 of your app folder because you will not have the rights to save changes.

    Best regards and thanks for this post.

  3. Otto Kekäläinen says:

    Are you sure you added the repository and refreshed repositories cache? The Entr package is there http://repo.merproject.org/obs/sailfishos:/chum:/1.0.4.20/1.0.4.20_armv7hl/armv7hl/entr-2.6-10.1.1.jolla.armv7hl.rpm

  4. Bojan says:

    Yes i tried several times. In the end i give up on emulator.
    On real device works like a charm.

  5. Amilcar Santos says:

    I’m using WinSCP with “Keep Remote Directory up to Date…” (from Commands menu) to sync between Qt Creator and Sailfish Emulator.
    No need to rebuild, but no auto-reload though…
    Just need to close app, save file(s), and relaunch (play button from Application Ouput)…
    Note: first time do a “Synchronize” (from Commands menu), set “Mirror Files” mode, uncheck “Preview changes” and check “Use same options next time”

  6. Otto Kekäläinen says:

    Amilcar: that kind of repetitive waste of time is the motivation why we blogged about auto-loading with entr. Please switch to Linux or Mac and you’ll find so many ways to be more productive than your current WinSCP workflow :)

    1. Amilcar Santos says:

      Otto: thanks for the advice, but as far I understand Entr is currently only available for ARM CPU devices, thus no point to change OS at the moment…

  7. martyone says:

    Entr is a nice tool – thanks for a tip.

    I personaly use this to speedup the QML devel. cycle with Sailfish SDK:

    1. switch to “Deploy by Copying Binaries” deployment method
    2. create a clone of your active build configuration, removing all steps from it.

    Edit QML, press Ctrl+R and you have it running in less than 3 seconds :)

Leave a Reply

Your email address will not be published.