Writing to a JSON file from an electron web app

Issue

Using electron I have made an app that can generate 6 arrays that create a frame for an animation, these arrays are going to be interpreted by another program to display the animation on a 6x6x6 led cube.

I want to be able to add these arrays to a JSON file.
I’ve tried adding const fs = require('fs'); to the js file and using it to add it to add to a JSON file but instead everything after it doesn’t run and no errors are shown.

Is there a way I can fix the problem with fs or is there another way to do this?

(I have enabled node integration)

main.js

const url = require("url");
const path = require("path");
const { Menu } = require("electron");

const {app, BrowserWindow} = electron;
let mainwindow;

app.on("ready", function(){
    mainwindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true, // <--- flag
            nodeIntegrationInWorker: true // <---  for web workers
        }
    });
    mainwindow.loadURL(url.format({
       pathname: path.join(__dirname, "Index.html"),
       protocol: "file:",
       slashes: true,
    }));

    


    const mainMenu = Menu.buildFromTemplate(mainMenuTemplate);

    Menu.setApplicationMenu(mainMenu);
    mainwindow.maximize();

});

const mainMenuTemplate = [
    {
        label:"File",
        submenu:[
            {
                label:"Upload",

            },
            {
                label:"Clear Animation"
            }
        ]
    }
];

Index.js

const fs = require('fs');

var L1 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var L2 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var L3 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var L4 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var L5 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var L6 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];

function CompileButton(){
    document.getElementById("Output").innerText = "int Layer1=[" + L1 + "]\nint Layer2=[" + L2 +"]\nint Layer3=[" + L3 + "]\nint Layer4=[" + L4 + "]\nint Layer5=[" + L5 + "]\nint Layer6=[" + L6 + "]";
}




compileButton.addEventListener("click", () => {
    CompileButton();
    var frame = {
        "layers": [
            L1,
            L2,
            L3,
            L4, 
            L5,
            L6
        ]
    };
    
    var obj = JSON.stringify(frame);
});

Solution

To fix this all you need to do is to disable context isolation in web preferences as well as enabling node integration like this:

webPreferences: {
        nodeIntegration: true,
        contextIsolation: false,
}

I found the answer here: Electron nodeIntegration not working, also general weird Electron behavior

Answered By – GO00OSE

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.