Electron React Webpack Typescript Boilerplate with Custom Window and Titlebar Menus.
A prebuilt project for creating desktop apps using Electron, React, Webpack & Typescript with hot-reload, easy to use custom import aliases & executable builds for distribution.
Special thanks to @guasam for development of Custom Window, Titlebar, UI/UX etc.
This project includes electron-window as core of custom window components and modules.
Following are the list of features it provides :
windows
or mac
value for platform
property with <WindowFrame>
in renderer.alt
or option
key.title
prop displays in titlebar center when menus are toggeled off.src/main/window/titlebarMenus.ts
file.src/renderer/window
components & styles.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 |
@src |
/src |
@styles |
/src/renderer/styles |
@components |
/src/renderer/components |
Introducing the ElectroVite project with a brief description below.
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-2024
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-2024
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