Skip to content

Latest commit

 

History

History
164 lines (109 loc) · 4.63 KB

README.md

File metadata and controls

164 lines (109 loc) · 4.63 KB

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

status

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

status

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