Create an electron create-react-app distribution with static files

Question

What I want

I want to create a desktop app that reads in a json data file, then uses that data to render things on screen. The json data file needs to be packaged into the app

What I did

Follow an article how to use create-react-app and make it work in electron

https://medium.freecodecamp.org/building-an-electron-application-with-create-react-app-97945861647c

Where I'm stuck at

Everything I have done sofar works in the development environment. I want to make a distribution, currently using electron-builder that creates an installer so I can distribute the app

However it seems my data files are not packaged or they might are ... I honestly can't tell, but can't be accessed when running the electron app after install

The Code

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const electron = window.require('electron');
const fs = electron.remote.require('fs');

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {files: []}
    }

    componentDidMount() {
        fs.readdir('./data', (err, files) => {
            this.setState({files: files});
        });
    }

    renderFiles = () => {
        return this.state.files.map((file, index) => {
            return (<p key={index}>{file}</p>);
        })
    }

    render() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h1 className="App-title">Welcome to React</h1>
            </header>
            <p className="App-intro">
              To get started, edit <code>src/App.js</code> and save to reload.
            </p>
            {this.renderFiles()}
          </div>
        );
    }
}

export default App;

The package.json

{
  "name": "react-electron-poc",
  "version": "0.1.0",
  "private": true,
  "description": "Electron App Poc",
  "author": "Celludriel",
  "devDependencies": {
    "electron": "^1.7.9",
    "foreman": "^2.0.0",
    "react-scripts": "0.8.5",
    "electron-builder": "^20.24.3"
  },
  "dependencies": {
    "react": "^16.1.1",
    "react-dom": "^16.1.1"
  },
  "homepage": "./",
  "main": "src/electron-starter.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron": "electron .",
    "dev": "nf start -p 3000",
    "pack": "build --dir",
    "dist": "npm run build && build",
    "postinstall": "install-app-deps"
  },
  "build": {
    "appId": "com.electron.electron-with-create-react-app",
    "win": {
      "icon": "https://cdn2.iconfinder.com/data/icons/designer-skills/128/react-256.png"
    },
    "directories": {
      "buildResources": "public"
    },
    "files": ["**/*", "dist/**/*"],
    "extends": null
  }
}

The Directory structure

    Directory: C:\Workspaces\react-electron-poc


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       21/07/2018     10:51                .idea
d-----       21/07/2018      9:34                build
d-----       20/07/2018     19:33                data
d-----       20/07/2018     20:22                dist
d-----       20/07/2018     19:12                node_modules
d-----       20/07/2018     17:22                public
d-----       21/07/2018     10:10                src
-a----       20/07/2018     17:22            285 .gitignore
-a----       20/07/2018     19:12         367115 package-lock.json
-a----       20/07/2018     20:21           1058 package.json
-a----       20/07/2018     18:10             56 Procfile
-a----       20/07/2018     17:22         119451 README.md

Needed help

Can anyone teach me how you package static content in this kind of setup ? Is it even possible and why is this all so HARD !!!!!!!

I'm a java developer that dabbles in C# and both languages never gave me these kind of headaches ... just to read a file packaged in the JAR or DIST folder !!!!!!!!!

Answer 1

Well it seems the folder was packaged after all in the asar file. However you need to access the assets relatively from the apps environment variables. I managed to get it working with this.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const electron = window.require('electron');
const fs = electron.remote.require('fs');
const app = electron.remote.app;

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {files: []}
    }

    componentDidMount() {
        debugger;
        const appPath = app.getAppPath();
        console.log(appPath);
        const path = app.getPath('userData');
        console.log(path);
        fs.readdir(appPath + '/data', (err, files) => {
            debugger;
            this.setState({files: files});
        });
    }

    renderFiles = () => {
        return this.state.files.map((file, index) => {
            return (<p key={index}>{file}</p>);
        })
    }

    render() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h1 className="App-title">Welcome to React</h1>
            </header>
            <p className="App-intro">
              To get started, edit <code>src/App.js</code> and save to reload.
            </p>
            {this.renderFiles()}
          </div>
        );
    }
}

export default App;

Notice the app.getAppPath(); it works but I'm getting more and more convinced I rather work with an established technology as C# or Java then keep on trying to learn react or any other web technology. If you have to spend 80% of your dev time on trying to configure your application then developing meaningful software ... it's just not worth it !