Find me on medium
Join my newsletter
If you're a JavaScript developer you might have had most (or all) of your experience building web application...
For further actions, you may consider blocking this person and/or reporting abuse
Just a heads up, your naming is wrong, there is no TypeScript in this article. :)
I wish I noticed this comment before starting to follow this article π’
Hello there...
I've been researching this topic for sometime now (running react on electron), and everytime this is the same solution I always find.
To be clear, what I really need is to access electron modules on the UI (ReactJS) like: dialogs, notifications, and many more system modules electron exposes... however I can not since React runs in a different process, and it (React) does not recognise electron libraries/packages.
The best solution I went with, is to include react libraries and babel through "index.html of electron" (basically I'm not running React on NodeJS, I'm running it within electron)... "I hope I'm making sense".
With this in place, react is now running on the same process as electron and it works fine but I still don't like it. "It's ugly π".
My question is, how can one make this work (accessing electron modules on the UI of react and react must use ES6 because I'm using pure JavaScript... and all my components imports are done on electron's index.html - "ugly")... ?
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: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.
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.
I could access the fs module via de
window.require('electron').remote
then get thefs
.Ok will try it out
Thanks for posting this. Super helpful! One thing, you might want to mention that
"electron": "electron ."
needs to be added to package.json to run electron. I didn't spot this and it took a bit of time to figure it out.So many questions:
1 - What's the point of serviceWorker.unregister()?
2 - There's no TypeScript, right? I downloaded the repo and don't see TS
3 - What's the point of running a development server, then loading the app through the dev server? I am new to Electron but thought you're supposed to have it all contained in some code the Electron app just presents by itself.
4 - What would you run to build it as a production-ready app you could send to others? (I'm curious how this relates to 3 with there being a development server)
Unfortunately, the instructions stop short of explaining how to use electron-build to package your app into an installer that you can distribute to users. To do, this you must add the following scripts to your package.json file:
"pack": "electron-builder --dir",
"dist": "electron-builder"
You must also move electron from the dependencies property in your package.json to the devDependencies property.
One other thing, if you want to follow the suggestion about how to avoid popping the dev server up in a browser, you must install cross-env.
I was getting errors about the entry point. I added this to the "build:" property in the package.json file:
Here is the source to the comment that helped.
npx did not work for me on macOS:
My npm version is 6.14.4, so it's greater then 5.2 and npx should work, right?
However, the old way worked:
Hi! Great article.
But I'm trying to have only typescript files and have a start.ts file. The react-script bundle it as chunk files. How do I point a /build/main.js after bundled it with react-scripts in my package.json?
Thx in advice!
Don't use nodemon as it will restart whole electron app,
just add (__dirname) to electron-reload.
like this : require('electron-reload')(__dirname)
in short __dirname should be your root dir. if your main.js is in src use one directory up.
Nice article @jsmanifest , i was wondering if you have ever tried adding electron tests to a "standard" CRA application. I'm going to deploy my CRA based app using electron and some small parts of the codebase will be platform specific, but i can't as yet find a decent way to test them without ejecting because there is no way to specify alternate Jest runners with CRA standard.
Oh, nice! I was just wondering if hot reloading was possible with electron - thanks!
Your welcome!
Hi, this article is really easy to follow. Can you add some steps on how to create an executable file after all this or share a link that could help?
where my exe files is it?