{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();
  }
});

Modify index.html

comment out the link-tag for the shortcut icon and add a base-tag with href=“./” inside the head-tag of the index.html file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!--<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />-->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <base href="./">
      
                                    .
                                    .
                                    .

  </head>
  <body>
                                    .
                                    .
                                    .

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!