Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/guasam/electron-react-webpack-typescript-2024

Electron React Webpack Typescript Boilerplate with Custom Window and Titlebar Menus.
https://github.com/guasam/electron-react-webpack-typescript-2024

boilerplate electron electron-boilerplate electron-custom-titlebar electron-react electron-react-boilerplate electron-react-template electron-react-typescript-template electron-titlebar-menu electron-webpack electron-window erwt-boilerplate react secure-electron-template typescript webpack

Last synced: about 4 hours ago
JSON representation

Electron React Webpack Typescript Boilerplate with Custom Window and Titlebar Menus.

Host: GitHub
URL: https://github.com/guasam/electron-react-webpack-typescript-2024
Owner: guasam
License: mit
Created: 2020-05-19T15:37:00.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2025-01-18T05:24:02.000Z (3 days ago)
Last Synced: 2025-01-18T06:20:57.243Z (3 days ago)
Topics: boilerplate, electron, electron-boilerplate, electron-custom-titlebar, electron-react, electron-react-boilerplate, electron-react-template, electron-react-typescript-template, electron-titlebar-menu, electron-webpack, electron-window, erwt-boilerplate, react, secure-electron-template, typescript, webpack
Language: TypeScript
Homepage:
Size: 3.23 MB
Stars: 366
Watchers: 3
Forks: 79
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

# Electron React Webpack Typescript - ERWT

A ready-to-go setup for building desktop apps with Electron, React, Webpack, and TypeScript. It’s got hot-reload, custom import aliases, and makes it easy to create executable builds for sharing.

## Core Features

- 🌟 **Electron** – *Build desktop apps with ease.*
- 🌀 **TypeScript** – *Type-safe coding made simple.*
- ⚛️ **React** – *For smooth and modern UIs.*
- 🥗 **SASS/SCSS Loader** – *Style it your way.*
- 🎨 **CSS Loader** – *Handle styles effortlessly.*
- 📸 **Image Loader** – *Easy image imports.*
- 🆎 **Font Loader** – *Add custom fonts easily.*
- 🧹 **ESLint** – *Keep your code clean and tidy.*
- 📦 **Electron Forge** – *Hassle-free builds and packaging.*
- 📐 **Custom Window Design** – *Frame, titlebar, and menubar your way.*
- 🔱 **Webpack Config** – *Optimized and customizable builds.*
- 🧩 **Path Aliases** – *Keep your code organized.*
- 🗡️ **Native Modules Support** – *Use Node.js modules seamlessly.*
- 🔥 **Fast Refresh & HMR** – *Instant updates while coding.*
- 🌞 **Dark/Light Mode** – *Built-in themes to switch it up.*
- 🎁 **Package Bundling** – *Share your app easily.*

## Custom Electron Window Titlebar & Menus

This project uses [electron-window](https://github.com/guasam/electron-window) to power custom window components and features.

**Here’s what it offers:**

- Customizable titlebar for your Electron app.
- Easy platform-specific controls for max/min/close buttons—just set the `platform` prop (`windows` or `mac`) in ``.
- Show or hide the titlebar menus by pressing the `alt` or `option` key.
- The `title` prop shows up in the center of the titlebar when menus are hidden.
- Edit menu entries in the `src/main/window/titlebarMenus.ts` file.
- Customize UI, colors, or window controls by tweaking the `src/renderer/window` components and styles.

## Custom Aliases for Paths

This project includes predefined aliases to simplify `import` paths. Here’s the list:

| **Alias** | **Target Path** |
| --------------- | --------------------------- |
| `@assets` | `/assets` |
| `@main` | `/src/main` |
| `@renderer` | `/src/renderer` |
| `@common` | `/src/common` |
| `@src` | `/src` |
| `@styles` | `/src/renderer/styles` |
| `@components` | `/src/renderer/components` |

## Installation

![status](https://img.shields.io/badge/ERWT-Main%20Version-blue.svg)

The default branch of the project has a clean structure with separate contexts for `main` and `renderer`, plus custom windows, titlebars, and more.

```bash
git clone https://github.com/guasam/electron-react-webpack-typescript-2024
```

![status](https://img.shields.io/badge/ERWT-Minimal%20Version-0a922a.svg)

The minimal version of ERWT has a super simple project structure "wihtout" any custom windows, titlebars, or menus.

```bash
git clone -b minimal https://github.com/guasam/electron-react-webpack-typescript-2024
```

Install dependencies using [pnpm](https://pnpm.io/) or [yarn](https://www.npmjs.com/package/yarn) or [npm](https://www.npmjs.com/) :

```bash
# using pnpm
pnpm install

# or using yarn
yarn install

# or using npm
npm install
```

## Start : Development

To get started with development and run your app, just use this command:

```bash
yarn start
```

## Lint : Development

To lint your application’s source code with ESLint, run this:

```bash
yarn lint
```

## Package : Production

Package your Electron app into OS-specific bundles (.app, .exe, etc) like this:

```bash
yarn package
```

## Make : Production

Making takes your packaged app and creates platform-specific distributables, like DMG, EXE, or Flatpak files (and more).

```bash
yarn make
```

## Publish : Production

Publishing takes the artifacts generated by the `make` command and uploads them to a service, so you can distribute or use them for updates (like an update server or an S3 bucket).

```bash
yarn publish
```

## Packager & Makers Configuration

This makes it easy to configure your packaged app and create platform-specific distributables, like DMG, EXE, or Flatpak files.

This configurations file is available in :

```bash
tools/forge/forge.config.js
```

For further information about packager, you can visit [Electron Forge Configuration](https://www.electronforge.io/configuration)