Añadiendo React A Una Aplicación De Electron

Electron es un framework de código abierto creado por Cheng Zhao, y ahora desarrollado por GitHub para crear aplicaciones multiplataforma de escritorio con JavaScript, HTML y CSS, en nuestro caso vamos a añadir React JS para usarlo dentro de Electron.

React JS es un framework de JavaScript creado por Facebook para crear webs SPA… y mucho más.

Para facilitar la configuración de React JS, utilizaremos el CLI Create React App para crear nuestra aplicación de React.

Creando nuestra Aplicación.

 

1). Crea una nueva aplicación de React JS usando Create React App.

npx create-react-app electron-react
cd electron-react

 

2). Añadir Electron a nuestra aplicación de React JS.

yarn add electron electron-builder --dev

 

3). Añadimos otras herramientas de desarrollo que necesitaremos.

yarn add wait-on concurrently --dev
yarn add electron-is-dev

 

4). Crea un nuevo archivo en, /public/electron.js, con el siguiente contenido.

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

 

5). Agregamos el siguiente comando a la etiqueta de scripts package.json.

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

Este script solo esperará hasta que React ejecute la aplicación React en localhost:3000 antes de iniciar Electron.

 

6). Ahora agregamos la siguiente etiqueta main a package.json.

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

 

Y el package.json tendrá que quedar como el siguiente ejemplo.

{
  "name": "electron-react",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "electron-is-dev": "^1.0.1",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-scripts": "2.1.5"
  },
  "main": "public/electron.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\""
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "concurrently": "^4.1.0",
    "electron": "^4.0.6",
    "electron-builder": "^20.38.5",
    "wait-on": "^3.2.0"
  }
}

 

7). Ahora ya puedes ejecutar su la aplicación en modo de desarrollo a través del comando.

yarn electron-dev

Resultado final.