You can build Electron apps by wrapping your Quasar project with its Electron wrapper. We’ll be using Quasar CLI to manage this.
The Quasar Electron wrapper can be installed on top of the default starter kit. Won’t work with any other specific starter kits, like “pwa”.
Now let’s create the Wrapper for your App.
$ quasar wrap electron
This command generates a subfolder inside your App named
/electron. It contains the assets of an Electron project mapped to your Quasar App.
Next, change current directory to the newly created
/electron folder and npm install its dependencies:
$ cd electron
$ npm install
You can benefit from Hot Reload while developing an Electron app. The wrapper will open an Electron app which will point to your App. As a bonus, besides Hot Reload, the Chrome Dev Tools will also be available so you can easily inspect code.
# Make sure you keep running (from root project folder):
$ quasar dev
# then from Electron wrapper folder
$ quasar dev
Make sure you build Quasar app from root project folder before packaging it with Electron and then follow these steps:
# from Electron wrapper folder:
$ quasar build
If you want to only build for a specific platform, like Linux, simply add another parameter to
$ quasar build linux # for Linux
$ quasar build darwin # for MacOS
$ quasar build win32 # for Windows
$ quasar build mas
While developing you got Chrome Dev Tools available. But what happens when the production build has something failing? It may happen, for example, that if you made a mistake in the code in some scenarios you’ll only see a blank window showing up. So how can you debug this? Simple:
$ electron --debug=[port] path/to/production/executable
$ electron --debug="4444" electron/dist/QuasarElectronApp-linux-x64/QuasarElectronApp
Your Electron App will be opened and you can check console output for errors.