Desktop Apps with React + ElectronOctober 31, 2017 at 8:38pm
did anyone here build a desktop application with React & Electron?
Even better if it's something with a "local" database / storage - so no need for a backend.
How was your experience with it?
Would you recommend to build it with React&Electron over a "native" desktop application with .NET / WPF or something like that? (Let's assume we're talking about a Windows-only application)
I'm looking forward to your stories 🙃
October 31, 2017 at 8:39pm
on topic: The React+Electron combination is something that regularly comes to my mind - I'd love to build something with that 😀
I built a project that was a Electron+React app. I can't share it cause it was proprietary at my last work place, but it was a really nice experience. Honestly, I barely used Electron, it was just a shell for putting it on a desktop. I did 98% of my development in the browser and then just had a separate npm script to build it for Electron.
Full scope of the project: Was an app designed for use on a 65" 4k touch screen and allowed 4 users to use it simultaneously. It was actually 2 Electron apps housing 3 different React apps that were talking to each other through Websockets over a local network. I actually was sending actionCreators over the websockets to make state updates in other stores, since the apps all had to be aware of each other's state for certain logical scenarios. It was a pretty interesting project.
If you're ever on a cruise in the Mediterranean and you come across a giant touch table telling you info about the ports your about to visit, you might be using my project.
November 1, 2017 at 8:47am
++ to Max 😀
And why did you decide to use React /w Electron? What would have been the alternatives?
November 1, 2017 at 8:00pm
I've been working on a pretty massive react + electron app for the past 1.5 years or so. It communicates to photoshop, and also features things like auto updating. Most of our code is in the renderer (browser) side, and our node side is pretty slim. I think it can be a very good tool to get the job done but there is some tricky stuff involved that we wish we would have known beforehand. For instance: you don't ever want to send anything but serialized values between the main process and renderer processes. Doing otherwise will eventually lead to issues. We created a layer that allows us to call functions in the main process from a renderer through IPC messages. Furthermore, setting up auto updates with code signing was crazy hard. We got it working but set up our own server to serve the update files so it would actually behave like we wanted. Looking back, keeping the node side slim wasn't the best idea I think. Our app allows the user to open multiple windows, which all use the same main / node process, and keeping it all in sync would have been much easier if the state and much more code was in the main process.
I can probably talk about this for hours, there is so much stuff we've learned developing this app. Developing desktop apps that communicate with the user's system is such a different beast than doing "normal" frontend work.
Well there is (sort of) support for auto updating in electron (https://github.com/electron/electron/blob/master/docs/api/auto-updater.md)
The thing is to get it actually working on both windows and mac was a big challenge for us. On mac you're obligated to use an apple certificate to sign the app, and you can't use that certificate to sign the windows app. On top of that, we had to hand roll the process that checks if there's an update available on windows (we created 1 server that exposes installers / update endpoints for both mac and windows), the files are read from S3. For windows, we manually download the update file to a specific directory in the cache somewhere. Then we notify the user and on next startup the installer file is run.
Some other stuff we had a hard time with:
If we let the user download the .app directly on mac, and they wouldn't move it from the downloads folder, from Sierra onwards (I think) the app is in quarantine so it can't update itself. The user has to move it (hence dmgs, they force the user to move the .app somewhere)
On windows, we couldn't get the auto update to work if the app doesn't install globally (which requires admin privileges). It would absolutely not work if we installed for the current user only.
This was a lot of trial and error to get working
Just remembered another pretty important thing:
When we started developing this app, we decided to host the frontend / react side on a server so we could update parts of the application without updating on the user's machine. In the end, we decided to ship all code to the client because it was very hard to keep track of compatibility between the two projects. (which version on one side supports which version on the other) We had to move more and more code to the main process and it just wasn't going to work out for us. This probably depends on how much stuff you're actually doing on the user's system. If the main process is only a wrapper to get a web app installable it might still be worth it.
Btw, I think this is the issue with remote object errors I talked about:
We even had this on the menu items, so now we configure the menu from the react app by sending a message to the main process, on click the main process sends a message back to the react app which item was clicked. This was after exhausting several options and losing hope it would ever get resolved in electron (we could have taken a dive into electron ourselves, but had little hope to fix it as it's a long running issue)
November 4, 2017 at 12:57am
I released two side-projects with electron in the past few months. Both are dev tools. I love building good looking, easy to use dev tools and electron and react are a perfect fit for that.
Here are the tools that helped me ship these projects with less pain
Electron Builder (https://www.electron.build/)
Electron builder is an amazing set of tools bundled together so you can ship your app as fast as possible. Electron builder takes care of building, packaging, code signing and publishing for you. And above all if you want to support auto updates, the built in auto-updater of electron need an update server but with electron-builder you don't need one and it works out of the box. This totally blew my mind because getting the built-in auto-updater of electron to work is bit of a pain. But if you decided to go with the built in electron updater, have a look at Hazel (https://github.com/zeit/hazel), which is an electron update server from Zeit and you can even deploy hazel to Zeit's now (https://zeit.co/now) with a single command for free. (I'm not associated with Zeit. I just love what these guys do :) )
Electron Webpack (https://webpack.electron.build/)
This is like create-react-app but for electron. This allows you to get your app up and running really quick without worrying about how to get the webpack config working with electron.
But electron has a reputation for being resource intensive. Even companies like Slack (Which uses electron for their desktop apps) gets criticized because their apps are resource intensive. But at the end it's all about trade-offs. Look what's important to you and your users :) Good luck!
November 4, 2017 at 8:48am
recently I followed this tutorial to setup React (via next.js) and electron:
you get all the flexibility of ready to go react environment
November 5, 2017 at 8:54am