Writing JSON files in ElectronJS (asar)

Question

Problem

FrameWork - ElectronJS

My program uses .json files to save the user entered data. In development environment those files are written perfectly, however after packaging it with electron-packager the JSON files are no longer written, which completely makes my program invalid.

I used mostly those JSON files to write my program, so removing them completely will be again doing the program from scratch. Is there a way to make the program write the JSON files in client PC as it does in dev-environment.

Sample Program

This is just a sample program, but all of my code is in this format.

//JavaScript 

//This Javascript catches user inputs and send them to jsonWriter function


document.getElementById("save").addEventListener('click', async function(e) {
  e.preventDefault()

  var userData = document.getElementById('username').value
  var acctData = document.getElementById('account').value

  var formData = {
    username: userData,
    account: acctData
  }; // create JS object

  await writer.jsonLC(formData);
});


// This is my json Writer function

async function jsonForAuth(data){

    let element = JSON.stringify(data);
    fs.writeFileSync(__dirname + '\\data\\auth.json', element) 

//All my directory for 'fs' are written in such format with a '__dirname'

}

module.exports.jsonLC = jsonForAuth;

// All of this works perfectly on dev-environment (VS-Code)

Now I package it with electron-packager

// Here is my package.json for reference

{
  "name": "electron_app",
  "productName": "Test App",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "dependencies": {
    "asar": "^3.0.3",
    "axios": "^0.20.0",
    "fs-extra": "^9.0.1",
    "jwt-decode": "^3.0.0-beta.2",
    "keytar": "^6.0.1",
    "node-fetch": "^2.6.1",
    "puppeteer-core": "^5.3.0"
  },
  "devDependencies": {
    "electron": "^10.1.2",
    "electron-packager": "^15.1.0"
  },
  "scripts": {
    "start": "electron .",
    "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
    "package-win": "electron-packager . electron_app --overwrite --asar --platform=win32 --arch=x64 --icon=assets/img/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Test App\"",
    "package-linux": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

The packaging codes are exactly same as This guide here.

Conclusion

Now after packaging the app and some script which don't require json files works fine. But Now the sample program above is rendered useless as json files are not created anymore.

** How to make this work? **

Note: I have NOT used ipcRenderer() anywhere in my program.

Update

I found out that asar is read-only file.

So is there a way to change the location of my json save location maybe to Local/Appdata ?

Thank you and sorry if explanation is too big.

Answer 1

Yes, writing to the application location is not a good idea and often forbidden. It should be sufficient to use the appdata folder which is usually used for application settings etc.

app.getPath(name) is the function you are looking for.

Then do something like:

fs.writeFileSync(app.getPath("appData") + "/auth.json", element);

Or maybe even better, using path:

fs.writeFileSync(path.join(app.getPath("appData"), "auth.json"), element);