clean-electron-react

clean-electron-react is an Electron boilerplate including a fresh setup of React, Typescript Prettier and Webpack in order to provide the cleanest possible setup experience.

Notice: This boilerplate is still in development

Getting Started

Clone the repository or Use this template.

git clone https://github.com/matthiaaas/clean-electron-react.git YOUR-PROJECT-NAME
cd YOUR-PROJECT-NAME
yarn

Development

Start the webpack-dev-server and listen for file changes (supports hot reloading). Then start Electron.

yarn build
yarn watch
yarn dev

You can now start building your app:

app/app.ts (electron entry)

const createWindow = () => {
  const win = new BrowserWindow({
    width: 820,
    height: 532,
    frame: false,
    titleBarStyle: "hiddenInset",
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })

  win.show()
}

app.whenReady().then(createWindow)

app/components/App.tsx

export default function App() {
  return null
}

Packaging

Package your app using electron-builder. Output can be found in /dist

yarn package

Why another boilerplate?

Other Electron React boilerplates come with a ton of additional dependencies and a predefined file structure.
This template is preconfigured from scratch and only includes essential parts and scripts so you can start developing right away.

Minimalistic file structure

├── app
    ├── components
    │   └── App.tsx // rendered component
    ├── app.ts // electron entry file
    ├── index.html
    ├── root.tsx // react renderer
    └── manifest.json
├── build // webpack build output
├── dist // electron-builder output
├── package.json
├── tsconfig.json
└── webpack.config.js