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 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 <WindowFrame>.
• 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

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

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

OR

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

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

Install dependencies using pnpm or yarn or npm :

# 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:

yarn start

Lint : Development

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

yarn lint

Package : Production

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

yarn package

Make : Production

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

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).

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 :

tools/forge/forge.config.js

For further information about packager, you can visit Electron Forge Configuration