Electron File Systems

Resources

tl;dr

Warning: the following uses remote and is now considered harmful. See the article. Do not use unless you are certain on the why.

Once the app is up, here is an example app for opening files:

import React, { useState } from 'react';
const fs = window.require('fs');
const electron = window.require('electron');
const { remote } = electron;

const App = () => {
  const [filePath, setFilePath] = useState<string>();
  const [fileJson, setFileJson] = useState<Record<string, any>>();
  const [saved, setSaved] = useState<boolean>(false);

  /**
   * Look for any files called strings.json and grab the
   * file path, read the data, update the data and set it
   * to the `fileJson` variable.
   *
   */
  const handleFileSelect = async () => {
    const res = await remote.dialog.showOpenDialog({
      properties: ['openFile'],
      filters: [{ name: 'Base i18n file', extensions: ['strings.json'] }],
    });

    const [jsonPath] = res.filePaths;
    if (jsonPath) {
      const data = JSON.parse(fs.readFileSync(jsonPath, 'utf-8'));
      setFilePath(jsonPath);
      data.third = 'here';

      setFileJson(data);
    }
  };

  /**
   * Write the file back and set the saved flag.
   *
   */
  const handleSaveFile = () => {
    if (filePath) {
      fs.writeFileSync(filePath, JSON.stringify(fileJson), 'utf-8');
      setSaved(true);
    }
  };

  return (
    <div>
      {saved && <p>File saved!</p>}
      <p>Open + save file</p>
      <div>
        <button onClick={handleFileSelect}>Open file</button>
        <button onClick={handleSaveFile}>Save file</button>
      </div>
      <p>{JSON.stringify(fileJson)}</p>
    </div>
  );
};
export default App;
copy

Debugging notes

As for debugging, if you get window.require is not a function, then head to your Electron config file and update the BrowserWindow config to include the web preferences:

mainWindow = new BrowserWindow({
  width: 900,
  height: 680,
  webPreferences: {
    nodeIntegration: true,
  },
});
copy