Skip to content

Latest commit

 

History

History
159 lines (107 loc) · 3.96 KB

README.md

File metadata and controls

159 lines (107 loc) · 3.96 KB

ERWT - Electron React Webpack Typescript (Secure Boilerplate)

ERWT is 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.



Custom Electron Window Titlebar, Frame & Menus

Yes!, this project now includes Electron Window submodule for Custom Window Frame, Titlebar, Menu Items, Window Controls & Application Icon etc by default. Following are some tips regarding to this submodule :


  • Menu items and windows controls layout or colors can be customized easily by modifying the misc/window modules.
  • The windows platform controls style is being used by default in the titlebar.
  • Menubar can be toggled by pressing [alt] or [option] key
  • When menubar is toggled off, application title will be displayed in center of titlebar.
  • Menu entries can be assigned/modified in misc/window/titlebarMenus.ts file.



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
  • 🌞 Light Mode, 🌜 Dark Mode Switch
  • 🎁 Package Bundling (Distribution / Release)



Installation

status

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

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

OR

status

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