electron-react-typescript-webpack-2022 v5.5.0
Electron React Webpack Typescript - Boilerplate 2022
ERWT is a minimal 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.
Screenshot
Custom Window Titlebar & Menu
This project now includes custom Electron Window, Titlebar, Menu Items, Window Controls & application icon etc by default. Menu items and windows controls layout or colors can be customized easily by modifying the misc/window
modules. The windows
platform buttons are being used by default in the Titlebar.
Menubar can be toggled by pressing ALT
key
Core Features
- ๐ Custom Window & Titlebar with Menus
- ๐ Electron
- ๐ TypeScript
- โ๏ธ React
- ๐ถ LESS Loader
- ๐จ CSS Loader
- ๐ธ Image Loader
- ๐ Font Loader
- ๐งน ESLint
- ๐ฆ Electron Forge
- ๐ฑ Webpack & Configuration
- ๐งฉ Aliases for project paths
- ๐ฅ Hot Module Replacement (Live Reload)
- ๐ Package Bundling (Distribution / Release)
Installation
To clone the ERWT boilerplate, you need to run following commands:
Master version of ERWT contains project files in separate context for main and renderer process, uses custom window, custom titlebar & menus.
git clone --recurse-submodules 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 Yarn or NPM :
yarn 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
3 years ago