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.
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:
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 build Quasar app from root project folder before packaging it with Electron and then follow these steps:
If you want to only build for a specific platform, like Linux, simply add another parameter to
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:
Your Electron App will be opened and you can check console output for errors.