Two Simple Ways to Setup Electron, React and TypeScript

I’m currently in the early stages of building a desktop app using Electron. It’s my first time building anything with Electron, so I’ve been looking for the easiest and best ways to do so using React and TypeScript. In exploring my options, I’ve played around with a number of different methods of getting my project setup including starting with create-react-app and even rolling my own Webpack config. Here’s a couple of the simplest ways I’ve found.

1. Electron React Boilerplate

The first way is the easiest by far. Electron React Boilerplate is a git repository you can clone with all of the configuration done for you. It uses Webpack for bundling and comes with React Router and React Fast Refresh already installed. Prior to version 2.0 which was released in late December of 2020, it also came with Redux, but they’ve since removed that. If you want more flexibility, this might not be the best option for you, but if your goal is just to have a React app up and running in Electron as fast as possible, Electron React Boilerplate is probably the way to go.

To get started with it, simply clone the repository and install the dependencies with the following commands.

git clone --depth 1 --single-branch \
 https://github.com/electron-react-boilerplate/electron-react-boilerplate.git \
 your-project-name
cd your-project-name
yarn

That’s it! Run yarn start and you’ll have a react app running in electron.

2. Electron Forge

Electron Forge is set of tooling for developing, publishing and installing Electron applications. Electron Forge is framework agnostic, so you’ll have to set up the React portion of it manually, but you’ll also have a bit more flexibility as to dependencies you install.

The procedure for getting started is similar to create-react-app. You will run a command and it will create the project folder, install dependencies and initialize a git repository for you. There are a few different templates you can use (which you can checkout in their docs), but we’ll be using the TypeScript + Webpack template for our purposes.

To get started run the following:

yarn create electron-app your-project-name \
 --template=typescript-webpack
cd your-project-name

Then, we’ll install react, react-dom, and the types for each.

yarn add react react-dom
yarn add --dev @types/react @types/react-dom

In the root of your project, in the tsconfig.json file, add the following key-value entry.

"jsx": "react"

In the src folder, create a new file called App.tsx which should look like this.

import React from "react";
import ReactDOM from "react-dom";

function App = () => {
  return (
    <h1>Woohoo, React in Electron</h1>
  );
}

function render() {
  ReactDOM.render(<App />, document.getElementById("root"));
}

Edit src/index.html to look like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Your React Electron App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

And finally, in src/renderer.ts add,

import "./app";

Now run yarn start and you should be up and running!

Conclusion

It seems like for the absolute quickest start, Electron React Boilerplate is the way to go. For a bit more flexibility and some additional tooling that will probably come in handy down the road, Electron Forge might be a better bet. For my app, I’ve chosen to go with Electron Forge. I’ll update you if I run into any pitfalls.