Electron-React App Template

Electron-React simple template using:

• Electron
• React
• Webpack handling main process and renderer separatly.
• Typescript for all the code.

---

Quick start

Install and setup:

git clone https://github.com/AGenson/electron-react-webpack-ts.git
cd electron-react-webpack-ts
yarn

Run in production mode:

yarn run build
yarn start

Run in development mode

yarn run dev

Distribute the app on different OS:

yarn run build

yarn run dist:mac
yarn run dist:win
yarn run dist:linux

Project Structure

Renderer

The renderer is the React code in src/renderer folder. You can start editing the App.tsx in src/renderer/components.

The renderer can be run independently in both development or production.

Running development

Contrary to the renderer, the main process needs the renderer running. Same dependence in production, electron needs the renderer to be built.

There are two sub-scripts in devolpment mode:

• main:dev-build: use Webpack in watch mode to transpile the code
• main:dev-watch:
  • wait for the first build from Webpack
  • then launch nodemon on webpack's output to relaunch Electron's instance