Electron with React Example Application

This application is a cross-platform desktop app built with Electron, React 19 and TypeScript, using Sass for styling and PNPM as the package manager. The frontend is bundled with Rsbuild.

The project uses a monorepo folder structure with separate main and renderer packages:

• The main package contains the Electron main process and a secure preload.ts script that exposes IPC-safe APIs to the react application;
• The renderer package contains the React SPA, styled with Sass;

The application can be packaged through the electron-builder bundler. For the application distributables creation, please read the section below.

Tech stack

Main Package

• Electron - https://www.electronjs.org/
• Typescript - https://www.typescriptlang.org/
• Electron-builder - https://www.electron.build/

Renderer Package

• React 19 - https://react.dev/
• Typescript - https://www.typescriptlang.org/
• Sass - https://sass-lang.com/
• Rsbuild - https://rsbuild.dev/

Project

• BiomeJS - https://biomejs.dev/

Application scripts

# Run the application in development mode
pnpm dev

# Build the application (both packages)
pnpm build

# Run linter
pnpm lint

# Run linter and fix problems automatically
pnpm lint:fix

Distributables creation

To produce a distributable version of this Electron application for Windows, Linux, and macOS, please check the following scripts. The application will be packaged for multi-platform. The distributables will be generated under the folder packages/main/dist/.

# Build React frontend
pnpm --filter renderer build

# Build Electron main
pnpm --filter main build

# Package app (local dirs)
pnpm --filter main run dist

# Create distributables	
pnpm --filter main run dist:mac

pnpm --filter main run dist:windows

pnpm --filter main run dist:linux

# or
pnpm --filter main run dist:all

# Run the whole process at once
pnpm build && pnpm --filter main run dist:mac

pnpm build && pnpm --filter main run dist:windows

pnpm build && pnpm --filter main run dist:linux

# or
pnpm build && pnpm --filter main run dist:all