Electron React Webpack Typescript (ERWT)

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

A minimal secure boilerplate for writing Desktop Applications using Electron, React, Webpack & TypeScript.
This project makes use of latest packages and configurations to serve the best environment for development.

Special thanks to @guasam for their contirubtion regarding custom window titlebar, menus & themes.

Custom Electron Window Titlebar & Menus etc.

This project includes electron-window for creating custom window components.

Following are the list of features it provides :

Custom Titlebar for Electron Window.
Easily changable platform specific controls for max/min/close buttons using windows or mac value for platform property with <WindowFrame> in renderer.
Titlebar menus can show/hide by pressing alt or option key.
Window frame title prop displays in titlebar center when menus are toggeled off.
Menu entries can be customized in misc/window/titlebarMenus.ts file.
Menu items and windows controls layout or colors can be customized easily by modifying the misc/window modules.

Core Features

🌟 Electron
🌀 TypeScript
⚛️ React
🥗 SASS/SCSS Loader
🛶 LESS Loader (optional)
🎨 CSS Loader
📸 Image Loader
🆎 Font Loader
🧹 ESLint
📦 Electron Forge
📐 Custom Window Frame
📐 Custom Window Titlebar
📐 Custom Window Menubar
🔱 Webpack & Configuration
🧩 Aliases for Project Paths
🔥 React Fast Refresh + Webpack HMR
🌞 Dark Mode + Light Mode (Theme)
🎁 Package Bundling (Distribution / Release)

Custom Aliases for Paths

We can use predefined aliases for import paths already used in this project. Following are the details:

Alias	Target Path
`@assets`	`/assets`
`@main`	`/src/main`
`@renderer`	`/src/renderer`
`@common`	`/src/common`
`@misc`	`/misc`
`@src`	`/src`
`@components`	`/src/renderer/components`

Installation

Main version of this project contains files structure in separate context for main and renderer, with custom electron window, titlebar etc.

git clone https://github.com/codesbiome/electron-react-webpack-typescript-2022

Minimal version of ERWT contains very simple project files structure, no custom window, no custom titlebar & menus.

git clone -b minimal https://github.com/codesbiome/electron-react-webpack-typescript-2022

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 develop and run your application, you need to run following command.
Start electron application for development :

yarn start

Lint : Development

To lint application source code using ESLint via this command :

yarn lint

Package : Production

Customize and package your Electron app with OS-specific bundles (.app, .exe etc)

yarn package

Make : Production

Making is a way of taking your packaged application and making platform specific distributables like DMG, EXE, or Flatpak files (amongst others).

yarn make

Publish : Production

Publishing is a way of taking the artifacts generated by the make command and sending them to a service somewhere for you to distribute or use as updates. (This could be your update server or an S3 bucket)

yarn publish

Packager & Makers Configuration

This provides an easy way of configuring your packaged application and making platform specific distributables like DMG, EXE, or Flatpak files.

This configurations file is available in :

tools/forge/forge.config.js

For further information, you can visit Electron Forge Configuration

Debug For Neovim

nvim-dap-vscode-js

dap.configurations.typescript = {
  {
    name = "Electron-forge Main",
    type = "pwa-node",
    request = "launch",
    cwd = "${workspaceFolder}",
    webRoot = "${workspaceFolder}",
    runtimeExecutable = "${workspaceFolder}/node_modules/.bin/electron-forge-vscode-nix",
    windows = {
      runtimeExecutable = "${workspaceFolder}/node_modules/.bin/electron-forge-vscode-win.cmd",
    },
    runtimeArgs = {},
    resolveSourceMapLocations = {
      "${workspaceFolder}/**",
      "!**/node_modules/**",
    },
  },
}
dap.configurations.typescriptreact = { -- change to typescript if needed
  {
    name = "Electron-forge Render",
    type = "pwa-chrome",
    request = "attach",
    port = 9222,
    webRoot = "${workspaceFolder}",
  },
}

ouyangjunyi/electron-react-webpack-typescript-2022