electron with react - setup(window)

reference : https://www.codementor.io/@randyfindley/how-to-build-an-electron-app-using-create-react-app-and-electron-builder-ss1k0sfer#dev-setupupdate for window

How to build an Electron app using Create React App and Electron Builder | Codementor

The stack

• Electron
• React - Create React App
• Rescripts
• Electron Builder

electron-userland/electron-builder

 

Dev Setup

Create our new app using Create React App.

npx create-react-app ee-tuto
cd ee-tuto

 

 

 

Add Electron.

 

npm install electron electron-builder --dev

 

electron-builder : A complete solution to package and build a ready for distribution Electron, Proton Native app for macOS, Windows and Linux with “auto update” support out of the box.

 

npm install wait-on concurrently --dev
npm install electron-is-dev
npm install cross-env

 

wait-on : wait-on is a cross-platform command line utility which will wait for files, ports, sockets, and http(s) resources to become available (or not available using reverse mode). Functionality is also available via a Node.js API. Cross-platform - runs everywhere Node.js runs (linux, unix, mac OS X, windows)

 

concurrently : Run multiple commands concurrently. Like npm run watch-js & npm run watch-less but better.

 

electron-is-dev : Useful for enabling debug features only during development. You can use this module directly in both the main and renderer process.

 

cross-env : Run scripts that set and use environment variables across platforms

 

Create a new file, public/electron.js, with the following contents.

 

// public/electron.js
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({width: 900, height: 680});
  mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);
  if (isDev) {
    // Open the DevTools.
    //BrowserWindow.addDevToolsExtension('<location to your react chrome extension>');
    mainWindow.webContents.openDevTools();
  }
  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();
  }
});

 

Add the following command to the package.json scripts tag.

"electron-dev": "concurrently \"cross-env BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\""

 

This script will just wait until CRA runs the React app on localhost:3000 before starting Electron.

Add the following main tag to package.json.

"main": "public/electron.js",

 

At this point you can run your new app in development mode via:

 

npm run electron-dev

 

 

If you see that image, congratulations you're ready to develop your app. Yay!

 

 

 

...the other omission