Need help with electron-react-typescript-webpack-boilerplate?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

172 Stars 40 Forks MIT License 103 Commits 15 Opened issues


Pre-configured boilerplate for Electron + React + TypeScript + Webpack

Services available


Need anything else?

Contributors list

No Data


Pre-configured Electron.js + React.js + TypeScript boilerplate with Webpack v5 & linters config predefined.

This boilerplate currently works on macOS and Windows. If something doesn't work, please file an issue.

Getting started

// execute
git clone
// edit the following fields in package.json for your own project
  "name": your-project-name,
  "version": whatever-you-like,
  "description": your-own-description,
  "build": {
    "appId": your-app-id,
    "productName": your-product-name,
    "buildVersion": your-build-number
  "author": who's-the-author?,
  "license": if-you-don't-want-to-use-MIT,
  "repository": type-and-link-of-your-repo,
  "keywords": keywords-of-your-project,
  "bugs": issue-page-of-your-repo,
  "homepage": homepage-of-your-repo

Then install all the

needed by executing the following command:
cd folder-containing-the-cloned-boilerplate
npm install --also-dev

Finally execute the following command to start Webpack in development mode and watch the changes on source files for live rebuild on code changes.

npm run dev


npm run dev
command won't start your app and get your app shows on the screen. To start your app, execute the following command:
npm start

Building the installer for your Electron app

The boilerplate is currently configured to package & build the installer of your app for macOS & Windows using


For macOS, execute:

npm run prod
npm run build:mac

For Windows, execute:

npm run prod
npm run build:win
archiving may cause errors while running the installed Electron app based on pervious experiences, whereas the macOS build with
enabled works just fine. You can turn it off by changing
line 26.

Extra options

The build scripts are pre-configured to build 64 bit installers since 64 bit should be the standard for a modern applications. 32 bit builds are still possible by changing the build scripts in

as below: ```json // from "scripts": { ... "build:win": "electron-builder build --win --x64", "build:mac": "electron-builder build --mac --x64" },

// to "scripts": { ... "build:win": "electron-builder build --win --ia32", // Works only on macOS version < 10.15 "build:mac": "electron-builder build --mac --ia32" }, ```

Builds for Linux, armv71, and arm64 can also be configured by modifying the build scripts in

, but those aren't tested yet. For details, please refer to documents of

Known issues

  1. As Apple introduced the notarization requirements with the public release of
    macOS 10.14.5
    , apps built for
    are now needed to be signed with a valid Developer ID certificate and let Apple notarizes it for you. This boilerplate doesn't include the notarization setup as of the
    release, but up until now, you should still be able to run your Electron app by allowing your app to be opened in
    System Preferences -> Security & Privacy
    -> General
    without notarizing it for still (tested on
    macOS 11.1

If you want to notarization your app using this boilerplate before those settings are included in the future updates, you can try follow the guides on issue electron-builder #3870.

  1. [email protected]
    added Apple Silicon and universal binary supports, but it's still a pre-release instead of a stable one so the one included in this boilerplate is still staying on
    which doesn't support building the universal binary yet.

Folder structure

| - dist/               //- Generated by Webpack automatically
| - node_modules/
| - out/                //- Generated by build script automatically
| - public/             //- Global static assets
| | - index.html
| | - style.css
| - src/
| | - main/             //- Backend modules for the Electron app
| | | - main.ts         //- Entry point of 'electron-main'
| | - models/
| | - renderer/         //- Frontend React components for the Electron app
| | | - renderer.tsx    //- Entry point of 'electron-renderer'
| | - utils/            //- Common utilities
| - test/               //- Unit tests
| - .eslintrc           //- ESLint config
| - .gitignore
| - package-lock.json
| - package.json
| - tsconfig.json       //- TypeScript config
| - webpack.config.js   //- Webpack config


Wing Chau @Devtography


I do this open source work for free in my free time. If you'd like me to invest more time on it, please consider give me some donations. Any donation is gonna be a great motivation for me.


Electron React TypeScript Webpack Boilerplate is open source software licensed as MIT.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.