Introduction

In my last blog post, I introduced the Quasar framework and showed how you can get your own web application up and running in a matter of minutes. For the past several months, I have been using Quasar to quickly create, release, and maintain my very first desktop app, which would not be possible if I were to use any other framework, in my opinion. Now that version 2 of the framework has been officially released, I thought this would be a good time to demonstrate how you can release your own cross-platform desktop app to the world for anyone to install and use! In this post, I will provide a summary of the requirements, setup, and configuration for the app, but the full instructions are available in the README file for the template project I created for this tutorial.

System Requirements

Quasar desktop apps use the Electron framework underneath. Currently, this means the app can run under the following operating systems and CPU architectures:

• Windows
  • OS: Windows 7 or later
  • CPU:
    • 64-bit Intel
    • 32-bit Intel
    • 64-bit ARM
• macOS
  • OS: macOS 10.11 (El Capitan) or later
  • CPU:
    • 64-bit Intel
    • 64-bit ARM (Apple Silicon)
• Linux
  • Recommended OS: Ubuntu 18.04+
  • Minimum OS: Ubuntu 14.04+, Fedora 24+, Debian 8+
  • CPU:
    • 64-bit Intel
    • 32-bit Intel
    • 64-bit ARM
    • 32-bit ARM

When developing the app, however, only one of the supported platforms is required, as we will later add a CI/CD pipeline to easily create and release different versions of the app for all possible platforms.

Create a New Project

First, I will briefly review how to create an new Electron app with Quasar. First, create a new Quasar project via the Quasar CLI, then change into the project directory. For the template project, I have selected all of the default options when creating the project.

$ quasar create quasar-electron-template
$ cd quasar-electron-template

At this point, I recommend initializing Git and committing the initial project before making any further changes, as well as creating a separate branch solely dedicated to app development.

$ git init
$ git add -A
$ git commit -m "Initial Quasar project"
$ git branch -M master # if the default branch is not master
$ git remote add origin [email protected]:edward-ly/quasar-electron-template.git
$ git push -u origin master
$ git checkout -b develop

Setup Project Configuration

By default, the source code for the initial Quasar project is only setup to run a web application, so we need to enable Electron mode for the project, as well as make additional changes to the Quasar configuration to enable both cross-platform availability and automatic updating. This can be done with the following steps:

1. In the Quasar configuration file, specify the target operating systems and architectures (all possible combinations where compatible), release provider (GitHub), and the compiler package (electron-builder).
2. Create a test build of the app and enable Electron mode with “quasar build -m electron”. This is also when Electron-specific dependencies and source code are actually installed.
3. Add electron-updater as an app dependency with “yarn add electron-updater”, then enable the package from the main JavaScript file for Electron.

Setup GitHub Actions

For continuous integration and delivery, we will use GitHub Actions to build and release our app, as it is completely free to use and supports all operating systems for builds. To allow our Quasar project to interact with GitHub Actions, we need to do the following:

1. Add two additional scripts in package.json for building and publishing the app.
2. Add a new file called .github/workflows/main.yml to the project. This configuration file tells GitHub Actions how to build the app for each platform and prepare the executable files for release.
3. Create a personal access token (with “repository” access) from your GitHub account settings, and add it to the Quasar project’s repository as a new “GH_TOKEN” repository secret.

Now you are ready to release a new app with Quasar!

Continuous Workflow

Now that we have set up the project to build and deliver the app for us, the last thing we need to keep in mind is how to create our first release, as well as deploy updates and release new versions after that for users to receive automatically. The following steps are adapted from the default electron-builder workflow, while modified to accommodate Git branching development models such as this one.

1. Draft a new release from the repository’s release page.
2. Push some commits to the “develop” branch.
3. Create a release branch, add some commits that will prepare the app for release (e.g. increasing the “version” number in “package.json”), then merge the release branch into “master”.
4. Push the new commits to the “master” branch. Afterwards, confirm that GitHub Actions has uploaded the binaries and associated files to the release draft.
5. Add a description (preferably release notes) to the release, and publish the release.
6. Merge the release branch back into “develop”, and delete the release branch.

Conclusion

Now that you are armed with this knowledge, I hope this tutorial inspires you to try out creating an app for yourself! Regardless of whether you decide to take the leap or not, I hope you are at the very least more aware of how popular (perhaps pervasive) JavaScript development has become. Getting started in app development, whether it be for the web, mobile, or desktop, is easier than ever thanks to the Quasar framework, and I am personally excited to see what the future holds for the framework itself and all of the apps built with it!