Why donate
API Explorer
Upgrade guide
The quasar.config file
Convert to CLI with Webpack
Browser Compatibility
Supporting TypeScript
Directory Structure
Commands List
CSS Preprocessors
Lazy Loading - Code Splitting
Handling Assets
Boot Files
Prefetch Feature
API Proxying
Handling Webpack
Handling process.env
State Management with Pinia
State Management with Vuex
Testing & Auditing
Developing Mobile Apps
Ajax Requests
Opening Dev Server To Public
Quasar CLI with Webpack - @quasar/app-webpack
Electron Accessing Files

Using __dirname & __filename

Since the main process is bundled using webpack, the use of __dirname and __filename will not provide an expected value in production. Referring to the File Tree, you’ll notice that in production the electron-main.js and electron-preload.js files are placed inside the dist/electron-* folder. Based on this knowledge, use __dirname & __filename accordingly.

...contents of /public

Read & Write Local Files

One great benefit of using Electron is the ability to access the user’s file system. This enables you to read and write files on the local system. To help avoid Chromium restrictions and writing to your application’s internal files, make sure to make use of electron’s APIs, specifically the app.getPath(name) function. This helper method can get you file paths to system directories such as the user’s desktop, system temporary files, etc.

We can use the userData directory, which is reserved specifically for our application, so we can have confidence other programs or other user interactions should not tamper with this file space.

electron-main or electron-preload

import path from 'path'
import { app } from '@electron/remote'

const filePath = path.join(app.getPath('userData'), '/some.file')

If you import @electron/remote in your preload script, then you need to set the following in your electron-main.js where you instantiate BrowserWindow:

mainWindow = new BrowserWindow({
  // ...
  webPreferences: {
    // ...
    sandbox: false // <-- to be able to import @electron/remote in preload script

Accessing the Public Folder

If for some reason, you have important files that you are storing in the /public folder, you can access those too by following the code below. To understand why you need to access them this way, please read the “Using __dirname & __filename” section above.

electron-main or electron-preload

import path from 'path'

const publicFolder = path.resolve(__dirname, process.env.QUASAR_PUBLIC_FOLDER)