{bit:magie}

Setup an Electron-React-App

Using yarn create-react-app, avoiding eject

scaffolding an electron-react-app using create-react-app, avoiding eject

Init the React project and add dependencies

First of all, init the react project and add the electron dependencies.

yarn create-react-app app

yarn add electron electron-builder wait-on concurrently cross-env typescript --dev

yarn add electron-is-dev

Configure the Project

Then modifiy the package.json

 "author": "{bit:magie}",
  "main": "public/electron.js",
  "homepage": "./",
  "scripts": {
    "start": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000 && electron .\"",
    "build": "yarn react-build && yarn electron-build",
    "release": "yarn react-build && electron-builder --publish=always",
    "react-start": "react-scripts start",
    "react-build": "react-scripts build",
    "react-test": "react-scripts test --env=jsdom",
    "react-eject": "react-scripts eject",
    "electron-build": "electron-builder"
  },

Add an electron starter file

In the public folder add an electron.js file with the following content

const electron = require('electron');
const {app, BrowserWindow , ipcRenderer} = electron;

const path = require('path');
const isDev = require('electron-is-dev');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 900, 
    height: 680,
    webPreferences: {
      nodeIntegration: true
    }

  });
  mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);
  mainWindow.on('closed', () => mainWindow = null);
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

Start, Build and Release the app

Start the Development-Environment

yarn start

Build the app

yarn build

Publish the app

yarn release

Note: Publishing still needs to be configured correctly, this is not shown here!