https://github.com/andreros/electron-react-app
This application is a cross-platform desktop app built with Electron, React 19 and TypeScript.
https://github.com/andreros/electron-react-app
2025 electron electronjs react react-19 rsbuild typescript
Last synced: 28 days ago
JSON representation
This application is a cross-platform desktop app built with Electron, React 19 and TypeScript.
- Host: GitHub
- URL: https://github.com/andreros/electron-react-app
- Owner: andreros
- License: unlicense
- Created: 2025-05-15T18:14:42.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-05-23T14:08:07.000Z (5 months ago)
- Last Synced: 2025-06-12T08:43:54.577Z (4 months ago)
- Topics: 2025, electron, electronjs, react, react-19, rsbuild, typescript
- Language: TypeScript
- Homepage:
- Size: 81.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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/](https://www.electronjs.org/)
- Typescript - [https://www.typescriptlang.org/](https://www.typescriptlang.org/)
- Electron-builder - [https://www.electron.build/](https://www.electron.build/)
### Renderer Package
- React 19 - [https://react.dev/](https://react.dev/)
- Typescript - [https://www.typescriptlang.org/](https://www.typescriptlang.org/)
- Sass - [https://sass-lang.com/](https://sass-lang.com/)
- Rsbuild - [https://rsbuild.dev/](https://rsbuild.dev/)
### Project
- BiomeJS - [https://biomejs.dev/](https://biomejs.dev/)
## Application scripts
```bash
# Run the application in development mode
pnpm dev
```
```bash
# Build the application (both packages)
pnpm build
```
```bash
# Run linter
pnpm lint
```
```bash
# 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/`.
```bash
# Build React frontend
pnpm --filter renderer build
```
```bash
# Build Electron main
pnpm --filter main build
```
```bash
# Package app (local dirs)
pnpm --filter main run dist
```
```bash
# 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
```
```bash
# 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
```