Inicio rápido con Electron usando React

Crea tu aplicación React

Desarrolla tu aplicación con la cadena de herramientas "Crear aplicación React". Introduce el siguiente comando en tu terminal:

npx create-react-app my_electron_react_application

Su aplicación debe incluir los siguientes archivos. Algunos archivos adicionales de su proyecto, como CSS, service workers y archivos de prueba, no se incluyen a continuación.

.
|-- package.json
|-- package-lock.lock
|-- public
|   |-- index.html
|-- src
|   |-- App.js // renderer process
|-- |-- index.js // renderer process

Any JS file within the src directory executes on a renderer process.

Eliminar la dependencia de web-vitals

La versión + de Create React 4.0 App incluye el módulo web-vitals. Dado que "web-vitals" está diseñado para funcionar con la web en lugar de con un entorno Electron, la inclusión de este módulo puede provocar un "chunk runtime-main [entry] Cannot convert undefined or null to object" error al compilar la aplicación. Para evitar este error, ejecute el siguiente comando para desinstalar el web-vitals paquete.

npm uninstall web-vitals

Luego borra el archivo reportWebVitals.js:

rm src/reportWebVitals.js

Por último, remueve las siguientes líneas del archivo src/index.js:

import reportWebVitals from './reportWebVitals';
reportWebVitals();

Instale CRACO para modificar la configuración de Webpack

Para que tu aplicación funcione correctamente con Electron, debes modificar la configuración de webpack. De forma predeterminada, las aplicaciones creadas mediante create-react-app usan un archivo webpack preconfigurado y oculto para el usuario final. La configuración predeterminada de webpack de Create React App no ​​es compatible con Realm y debes sobrescribirla. Puedes usar CRACO para sobrescribir estos valores predeterminados. Instala CRACO con el siguiente comando:

npm install @craco/craco

Crear un archivo de configuración de CRACO

Para anular los valores preconfigurados del paquete web, cree un archivo de configuración de CRACO llamado craco.config.js en la raíz de su aplicación. Añada lo siguiente a este archivo:

const nodeExternals = require("webpack-node-externals");
module.exports = {
  webpack: {
    configure: {
      target: "electron-renderer",
      externals: [
        nodeExternals({
          allowlist: [/webpack(\/.*)?/, "electron-devtools-installer"],
        }),
      ],
    },
  },
};

El target se establece en "electron-renderer" para compilar tu aplicación para entornos de navegador para los módulos de funcionalidad incorporada de Electron. nodeExternals también se especifica para evitar que todos los node_modules se incluyan en el paquete. La clave allowList en el objeto pasado a nodeExternals especifica una lista de módulos a incluir en el paquete, en este caso, las herramientas de desarrollo de electron y webpack. Para utilizar webpack-node-externals, ejecutar el siguiente comando:

npm install webpack-node-externals --save-dev

Instalar Electron

Para agregar Electron a su proyecto, ejecute el siguiente comando:

npm install electron --save-dev

Cree su archivo de proceso principal de Electron

El archivo main process de Electron puede considerarse el punto de entrada a tu aplicación. Este archivo es responsable de cargar el archivo index.html de tu aplicación React en el archivo BrowserWindow creado por Electron.

Agregue el siguiente código a un nuevo archivo llamado electron.js en el directorio public:

const electron = require("electron");
const path = require("path");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;
function createWindow() {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: { nodeIntegration: true, contextIsolation: false },
  });
  // and load the index.html of the app.
  console.log(__dirname);
  mainWindow.loadFile(path.join(__dirname, "../build/index.html"));
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", createWindow);

Tu aplicación debería incluir ahora los siguientes archivos. Algunos archivos adicionales del proyecto, como CSS, service workers y archivos de prueba, no se incluyen a continuación.

.
|-- package.json
|-- package-lock.lock
|-- craco.config.js
|-- public
|   |-- index.html
|   |-- electron.js // main process
|-- src
|   |-- App.js // renderer process
|-- |-- index.js // renderer process

Todos los archivos JS del directorio src se ejecutan en el proceso renderer. El archivo electron.js y cualquier archivo que requiera se ejecutan en el proceso principal.

Ejecute su aplicación

Para ejecutar su aplicación, especifique una página de inicio y un punto de entrada principal para Electron agregando lo siguiente a su archivo package.json:

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

Por último, agregue los siguientes scripts a su archivo package.json:

"scripts": {
  "build": "craco build",
  "start": "electron ."
},

En tu terminal, ejecuta npm run build y luego npm run start. Deberías ver lo siguiente:

Instalar Realm

En su terminal, use el siguiente comando para agregar Realm a su proyecto:

npm install realm@12

Utilice realm en el proceso de renderizado agregando lo siguiente en la parte superior del src/App.js archivo (también deberá importarlo en cualquier archivo en el que escriba el código utilizando Realm):

import Realm from "realm";