Discussion on: Create Your First React Desktop Application in Electron with Hot-Reload

[jsmanifest]

Hello there. You can use electron modules in the renderer process by sending messages through the ipc module. Have you also tried the remote module from electron?

You can also use electron-util in your project and use the api object in any renderer process:

import * as electronUtils from 'electron-util'

const { api } = electronUtils

function quitApp() {
  api.app.quit()
}

[Mpho Kgosisejo]

Ok will try it out

[Paul Kinnucan]

As far as I can determine, this CRA-based approach to creating an electron app will not work for electron apps that need to access the local file system, which is just about every electron app. The reason the CRA-based approach doesn't work for electron is because CRA's webpack implementation mocks out the Node fs module, on which electron relies. The CRA team says that the reason CRA mocks out fs is that CRA is intended for web applications that do not access the local file system and therefore have no need for fs. This leads to a

TypeError: fs.existsSync is not a function

error in any module that uses ipc or remote.

I have tried restoring fs in an ejected version of CRA. This works in production mode but not in development mode. The reason is that the webpack hot module reloader runs in a server and therefore errors out on any app module that uses fs.

All of this illustrates the basic problem with using boilerplates like CRA to set up a project. They all have hidden assumptions that can stop you cold after you have spend hours or days developing an app based on one of them.

[Paul Kinnucan]

After giving up on the CRA-based approach described here, I tried the electron-webpack approach for my react-redux-typescript-based app. Everything went smoothly. My app, which is a pretty complex, hierarchical diagram viewer, worked as expected--in development mode.

However, the production build failed to execute redux-based updates. After many hours of experimentation and surfing, I found out the reason on the electron-webpack issues site. See

github.com/electron-userland/elect...

Turns out that decisions made by electron-webpack developers break redux-react. Fortunately, the suggested workaround works. My app now works the same in production mode as in development mode. However, I am now leery of this boilerplate solution as well.

[Weslley Rocha]

I could access the fs module via de window.require('electron').remote then get the fs .

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

export const saveFile = () => {
  fs.writeFileSync('./test.txt', 'hello-world')
}