Integrating create-react-app into electron - reactjs

Question

I try and not resort to StackOverflow too often, but this is driving me nuts. I have a create-react-app which I am trying to wrap into the electron framework. I discovered a tutorial online which basically has you create everything from scratch with a barebones webpack config setup, and it works, but only when starting up the webpack dev server first before starting the electron application. This is redundant when you want to package the application, as the package.json start script only runs one command, which is "electron .". So how do I go about including the static production files of my React app into Electron? I have tried it several time before without any success, and the closest I came was pointing (within the main.js entry file for electron) to my static react index.html file. Only problem was, because it was a production build, everything was minified. For the resources within this file to load correctly, I had to manually remove all the first "/" from any src url (you can see how quickly that would become quite cumbersome with larger apps).
So I guess my actual question is:
How do I "serve" the static files of my react application so electron loads it correctly?
(Do also take note that I ejected the application in order to make use of css modules)
PS: Link to the react-electron tutorial - https://medium.com/#Agro/developing-desktop-applications-with-electron-and-react-40d117d97564

Answer 1

By the logic of the tutorial you have to put the static files into the /public folder assets will be loaded relativ from the html document, but this will result in the same issue with paths where you had to manually remove all the first "/" from any src url. The URL's need to be correct when build.
That beeing said i think the tutorial encourages bad practice for electron development, and i think that is part of the issue you have.
You would never start electron from the node_modules path. You do this by electron ./path/to/electronscriptsfolder this will load a index.js/main.js in this folder containing the app definitions.
Webpack is the wrong approche for electron because, you don't need bundling and when packing electron, webpack tends to generate issues with native packages and paths (As you described yourself). You would use electron-compile or a gulp pipeline to do it by your electron specific logic.
There is no babel configuration given even though they are super important for electron. Basically you need two bable configs, one for electron running on a specific node version and one for the chromium running on a specific implementation.
Here an example for electron 1.8.1 which uses Chrome 59 and Node.js 8.2.1
Renderprocess
{
"presets": [
["env", {
"targets": {
"chrome": "59"
}
}]
]
}
Mainprocess
{
"presets": [
["env", {
"targets": {
"node": "8.2.1"
}
}]
]
}