How to use electron's app.getPath() to store data?

Question

I want to store images on the users computer, so I figure it should be stored in users data folder, as described here.

app.getPath(name)

name. Returns String - A path to a special directory or file associated with name. On failure an Error is thrown. You can request the following paths by the name:

• home User's home directory

• appData Per-user application data directory, which by default points to:

  %APPDATA% on Windows $XDG_CONFIG_HOME or ~/.config on Linux ~/Library/Application Support on macOS

• userData The directory for storing your app's configuration files, which by default it is the appData directory appended with your app's name.

• ...

This is what I think you're supposed to do:

const app = require('electron');
alert(app.getPath('userData'));

But I get "getPath is not a function". I am not sure where to put it. It does not work from my html file or the renderer file, and I'm not sure how to use it from the main file because that's not linked to the web page.

Answer 1

remote is considered dangerous.

app.getPath will be always available in main process.

Here is how to do it in renderer process without using remote (electron 7+)

Basically you have to use invoke in renderer.

in main

ipcMain.handle('read-user-data', async (event, fileName) => {
  const path = electron.app.getPath('userData');
  const buf = await fs.promises.readFile(`${path}/${fileName}`));
  return buf;
})

in renderer

ipcRenderer.invoke('read-user-data', 'fileName.txt').then(
  result => doSomething()
);

Answer 2

Here is what I use when I need to switch between dev and release

const electron = require('electron');
export const userDataPath = (electron.app || electron.remote.app).getPath(
  'userData'
);

Answer 3

Another way to prevent the error "getPath is not a function" is to make the code work both in the renderer process and the main process:

const electron = require('electron');

const configDir =  (electron.app || electron.remote.app).getPath('userData');
console.log(configDir);

Answer 4

I had trouble with app.getPath('userData') to save/load config files, etc and ended up using OS specific env vars in the meantime:

const getAppBasePath = () => {
        //dev
    if (process.env.RUN_ENV === 'development') return './'

    if (!process.platform || !['win32', 'darwin'].includes(process.platform)) {
        console.error(`Unsupported OS: ${process.platform}`)
        return './'
    }
        //prod
    if (process.platform === 'darwin') {
        console.log('Mac OS detected')
        return `/Users/${process.env.USER}/Library/Application\ Support/${YOUR_APP_NAME}/`
    } else if (process.platform === 'win32') {
        console.log('Windows OS detected')
        return `${process.env.LOCALAPPDATA}\\${YOUR_APP_NAME}\\`
    }
}