Build an Electron app with Typescript and React

As you may have seen or heard, we recently released a desktop application named Code Snippets Manager for Linux, Windows, and macOS. We like to move quickly here, so writing one app in Electron that outputs for all three platforms was a no-brainer.

Today, we want to share with you, how you too can build a cross-platform desktop application quickly.

Finding the perfect Typescript/React boilerplate

It's important to use the right tools before you start building.

Luckily for you, we've already surveyed the Electron ecosystem to see how apps are built and what options there were to choose from. There's a list of boilerplates/CLIs on the Electron site, but below we'll give you the rundown of each and ultimately the one we chose.

Our Electron application boilerplate requirements

Typescript/React support built-in
Excellent support/community
Actively maintained

Option 1 - Electron-Next and Nextron (Electron + Next.js)

You should be familiar with Next.js; it's a product of Vercel.

Our Codiga Hub is built with it!

They've gotten so popular over the years that there are two packages involving Electron: Electron-Next and Nextron.

The former hasn't been updated in 4 years, so we instantly passed on that.

The latter started around the same time but is updated often (as recently as September 2022). If you already have a Next.js site that you want to convert to an app, this is a viable solution. For us, it didn't have the Electron support we were looking for.

Option 2 - Electron Forge (Electron + Typescript + Webpack)

Electron Forge had everything we were looking for and might be a simpler boilerplate to get started with versus our next option. They have a channel in the Electron Discord that is active daily. If you don't want to use React or a frontend framework, we would've considered this more.

They have other boilerplates including one for Typescript and another for Webpack, so if you only want Typescript or Webpack check those out.

Option 3 - React Electron Boilerplate (Electron + Typescript + React)

We saved the best for last! We chose React Electron Boilerplate because it had everything we wanted out of the box: the community supports it, it has regular updates, and they have a documentation site.

If you want to use React, Typescript and Electron together, you can't go wrong with this choice.

Install React, Typescript and Electron

First, you'll need to clone the repo and install its dependencies. You can use the following commands to get an app started. Make sure you insert your project name!

git clone --depth 1 --branch main https://github.com/electron-react-boilerplate/electron-react-boilerplate.git your-project-name
cd your-project-name
npm install
npm start

Check that your Electron application passes your pipelines

I learned the hard way that waiting until you're finished with an app to check if it passes your boss's Github Action is not the way. You can find these actions in the workflows folder inside your .github folder.

Feel free to remove or edit these files as you desire. Just make sure as you progress with your app, that you ensure it still builds, packages, and can release itself.

If you want to release your app on app stores, you'll need to sign and notarize your app. We go through all the necessary steps in this article: CI/CD pipeline to Sign and Notarize Electron Apps.

Install your React component library and choose how to style

This boilerplate already comes with React, Typescript, Webpack, and React Router installed, but what about styling?

Support for things like CSS, SASS, and CSS-Modules are included. If you prefer TailwindCSS there are docs available for that. At Codiga, we have our own component library built with Chakra-UI in Typescript.

Whatever styling, framework, or state management tool you end up choosing, your entry point will be ./src/renderer/App.tsx. Here you can wrap your app with whatever you choose.

export default function App() {
  return (
    {/* an error report wrapper for our app */}
    <RollbarProvider config={rollbarConfig}>
      <ErrorBoundary>
        <ApolloProvider client={client}>
          <ColorModeScript initialColorMode="system" />
          <ChakraProvider theme={theme}>
            {/* maybe you want some global context for your app? */}
            <YourCustomProvider>
              {/* react-router wrapper */}
              <Router>
                {/* custom global layout */}
                <Layout>
                  <Routes>{/* your routes here */}</Routes>
                </Layout>
              </Router>
            </YourCustomProvider>
          </ChakraProvider>
        </ApolloProvider>
      </ErrorBoundary>
    </RollbarProvider>
  );
}

Using Node modules in your Electron application

If you're copying and pasting some our your code snippets or components from another project, you may run into an issue with native Node modules.

Because Electron's renderer process doesn't have access to these native Node modules, if you need to use them in your code, you'll need to install them to your ./release/app/package.json. This boilerplate will handle the rest for you.

Make sure you add these modules to your webpack.config.base.ts fallback object.

const configuration: webpack.Configuration = {
  // ... rest of your config
  resolve: {
    extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],
    modules: [webpackPaths.srcPath, "node_modules"],
    // the modules you need will go here
    fallback: {
      url: require.resolve("url/"),
      path: require.resolve("path-browserify"),
      buffer: require.resolve("buffer/"),
      process: require.resolve("process/browser"),
    },
  },
};

Brand your application package

Once you're finished your app (or whenever) you'll want to update some of the Electron React Boilerplate branding. If you look through your package.json file, you'll see a lot to be updated. Make sure to update the other package.json in the release folder too!

Conclusion

Following through this article should more than help you get started on your very own app. If you have further questions on Electron or the Electron React Boilerplate, I'd suggest joining their Discord as you can get help fast from people who have been in your shoes.

Happy building.