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.

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.

• 🌟 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)

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

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

To develop and run your application, you need to run following command.
Start electron application for development :

yarn start

To lint application source code using ESLint via this command :

yarn lint

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

yarn package

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

yarn make

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

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

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}",
  },
}