React and Electron

02 September 2021

Today I created my first Electron app. It was pretty cool to see something that would usually be stuck within a browser exist as its own unit on the operating system. Getting a "hello-world" going was really easy with the quick-start tutorial.

To get your first electron application built you’ll need to install both:

• Electron to get the developer environment going
• Electron forge if you want to build/publish the application

Then after you’ve built some of your app you can run:

npx electron-forge import

At the end of this you’ll have 320MB worth of node_modules dependencies in your folder. In my case, forge set itself to use a “squirrel” windows build, which I assume it must have chosen on based on the fact I’m running windows.

After you run the build on the quick start application, you’ll end up with an app 182MB sized application which shows one page, and seems to hog about 80MB of memory when it’s idling away.

These are reasonably big numbers if you’re used to writing native programs in close-to-the-metal languages but the ability to use web technologies to write desktop apps is awesome. And there’s a great article from Niels Leenheer about how Electron applications are fine, and will continue to be useful.

But what about React? #

So I started trying to convert a React single page application into an Electron app. How hard could this be? All I really need to do was convert some JSX to JS right before the app starts right?

So I ended up on this Stack overflow page. The top answer advises us to pull in a babel package called Babel-Register, which looked like a pretty elegant solution. Unfortunately when trying this technique I had all kinds of problems with Electron getting mad at me for using an inline script, and babel yelling at me for using the wrong version even after bumping my dependencies. It wasn’t happening.

So then I took a look at Electron React Boilerplate. This pulled in a mouth-watering amount of tooling. When I ran the command to get the dev server running, the scripts started asking for yarn to be installed. I haven’t got yarn. Maybe I should’ve bitten the bullet and downloaded it but I'm more used to just sticking with npm. I tried a find-and-replace to change all the yarn scripts to npm scripts to see if that would would run - but no dice.

So I threw the Electron React Boilerplate project away and went back to the hello world version. This time I npm installed esbuild - as it’s the speediest, most lightweight way to convert JSX into JS in 2021. Then I set up my npm build and start scripts to run esbuild first, pushing the JavaScript into an intermediate folder, then running the electron build/start command which pulled from the intermediate folder. This worked extremely well. I ran the script and my React app was live! 😈

Here’s a starter for this method of making electron apps with React and esbuild. Go forth and create native apps using your webby skills!