menu
up-caret
down-caret

React

A community of developers, designers and others who love React.js. ⚛️

# General

General chat

Trending conversations
New website for React developers
@kheruc · 20h
Large multi-tenant React apps
@gregoralbrecht · 4d
Can anyone suggest good beginner tutorial for react with redux?
@archsaan · 3h
Thinking in React reusable components
@tom-son · 19h
How to organize my code
@simonmilleto · 4d

Desktop Apps with React + Electron

October 31, 2017 at 8:38pm

Hey folks,

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

Ohh /subscribe, we've been thinking about wrapping Spectrum in Electron!

like-fill
2
  • reply
  • like

Also, Michele Bertoli made a recipe for Franz today, so if you use Franz you can now get Spectrum right on your desktop! (Franz: https://meetfranz.com/)

like-fill
6
  • reply
  • like

😮 yes I'm using franz for a long time now - going to check that instantly 😀

  • reply
  • like

on topic: The React+Electron combination is something that regularly comes to my mind - I'd love to build something with that 😀

like-fill
1
  • reply
  • like

random side note, i'd be interested to know how i could use electron to have a list of files on my system

like-fill
1
  • reply
  • like

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.

like-fill
2
  • reply
  • like

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.

like-fill
3
  • reply
  • like

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.

like-fill
8
  • reply
  • like

Now I want to go on a cruise in the Mediterranean just to see that 😱

like-fill
3
  • reply
  • like

November 1, 2017 at 8:47am

Wow! Thanks for sharing Kyle!

like-fill
1
  • reply
  • like

++ to Max 😀

And why did you decide to use React /w Electron? What would have been the alternatives?

  • reply
  • like

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.

like-fill
1
  • reply
  • like

How do you do the auto updating?

  • reply
  • like

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.

like-fill
2
  • reply
  • like

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.

like-fill
2
  • reply
  • like

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.

like-fill
3
  • reply
  • like

That's super great knowledge to have, thanks for that!

  • reply
  • like

No problem!

If you have any specific questions, ask away!

  • reply
  • like

Btw, I think this is the issue with remote object errors I talked about:

https://github.com/electron/electron/issues/8205

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)

like-fill
3
  • reply
  • like
I launched an Electron + React app over a month ago at http://heycoaster.com - not using any backend for the core part of the app since I'm just calling 3rd party API, and just use localStorage for minor user preferences. Everything is store locally, which make it fast to load, but less flexibility to add/change stuff. But I don't think that's a big issue for my type of app. I'm implementing the autoUpdater feature to make it easier to push new version of the app (not in the current version yet). Seems robust enough so far. I'm not a developer by profession, just a designer who likes to build stuff for fun, so I'd say the learning curve for this is pretty ok for now 😄
like-fill
6
  • reply
  • like

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.

- http://getatmo.com/

- https://wiretap.debuggable.io/

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.

Regarding your question about WPF and .Net, I used to build WPF apps and I really like WPF and tools like Expression blend which makes things really fun. But If you ask me, I would not go back because it's so much easy to build apps with electron by reusing the libraries and frameworks JavaScript community offers compared to WPF. There is a react component out there for most of the use-case you would encounter and I don't think that's true for WPF.

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!

like-fill
1
  • reply
  • like

And if you love electron and .Net the same and struggling to let one go, look at this https://github.com/ElectronNET/Electron.NET

like-fill
1
  • reply
  • like

November 4, 2017 at 8:48am

recently I followed this tutorial to setup React (via next.js) and electron:

https://leo.im/2017/electron-next

you get all the flexibility of ready to go react environment

like-fill
2
  • reply
  • like

My experience had pretty good, I am still working on the app, however so I am finding inspiration from https://github.com/meetfranz/franz

like-fill
2
  • reply
  • like

November 5, 2017 at 8:54am

Wow it's amazing what you guys built! Thanks for all the information!

I somehow expected that working with Electron comes with some pain points, but it looks like I was wrong.

  • reply
  • like
Show more messages