3

I'm writing a desktop app using electron and react. I want to store some information in a JSON file. I've tried both web-fs and browserify-fs to accomplish this, and neither is working as expected. My setup is as follows

project/app/(react files)

project/index.html

project/js/bundle.js

project/main.js

I'm using watchify to compile all the changes in the react files to the bundle.js file (which is read by index.html).

The following is ran from app.js in project/app/ (which is also where the JSON file is stored)

import * as fs from 'browserify-fs';
...
fs.writeFile('./fileData.json', data, function(err){
    if(err)console.log(err);
    else console.log("success");
   });

'success' is always logged to the console, however the contents of the file is not updated, regardless of how I specify the path.

I've tried './fileData.json'

'/fileData.json'

__dirname + '/fileData.json' (which tells me that __dirname couldn't be found)

(absolute path to fileData.json) (which tells me that /Users could not be found)

After doing the above, if I change the writeFile to readFile and log the contents to the console, the updated file is printed. Even if I delete the fileData.json file, the file is successfully read.

This makes me believe that fs.writeFile() is writing to a different directory, not the one the process is being ran from. Despite this, I cannot find any other fileData.json files anywhere on my computer. There's a couple other weird behaviors:

  1. When logging __filename (which should log the entire filepath), the only thing printed is "/app.js" with no leading file path.

  2. Calling "process.cwd()" just gives me "/"

  3. When calling fs.writeFile() with the full file path "/Users/...." I get a folder not found error

Anyone know what could be causing this behavior and how to fix it?

Edit - I also tried getting the absolute path by adding

var path = require('path')
var appDir = path.resolve('./app');

which again only gives me /app when it should be returning an absolute path

Aaron Wilson
  • 33
  • 1
  • 4

1 Answers1

1

Can you confirm the same behavior when not using browserify-fs? Just use plain old fs. (Note you can do this straight from the Chrome dev tools console).

Looking at browserify-fs's page, it looks like it implements a kind of virtual file system using a dependency called level-filesystem (which uses level db). So the files you're expecting to get created aren't. They're being created within a level db database. You could probably find a level db file somewhere that has the information you're trying to write directly to the file system in it.

For simple writing/reading of a JSON file, I'd recommend https://github.com/sindresorhus/electron-config.

ccnokes
  • 6,885
  • 5
  • 47
  • 54
  • using regular fs doesn't work (gives me uncaught TypeError: _fs2.default.writeFile is not a function; importing as follows: import fs from 'fs';) I may be importing it incorrectly though, as doing console.log(fs) gives me an empty object (doing var fs = require("fs"); also fails) I originally switched to the browserify-fs because some other stack overflow posts said that you can't use fs from the browser. I'll look into the electron-config, seems like it will work for my current needs; although I would still like to be able to read and write to files from the app in the future – Aaron Wilson Nov 28 '16 at 18:49
  • @AaronWilson that's because browserify will mess up all your node and electron core module requires (because browserify, as it's name suggests, is for node-ifying a browser env). In Electron, all node.js core modules are available to you in the renderer process. In the chrome dev tools, you can `require('fs')`. You may want to reconsider browserify/webpack because in Electron you have node's `require` provided to you everywhere natively. I don't think there's much benefit to bundling in Electron apps, personally. – ccnokes Nov 28 '16 at 20:00