W - PFG - Generar aplicación escritorio react y electron
Configuración del proyecto de react y electron
En estos sencillos pasos configuraremos nuestro proyecto realizado en react js para convertirlo en un instalable a partir de Electron.
1.- Instalar Electron de manera global en nuestro equipo.
npm i -D electron@latest
2.- Crear o tener un proyecto de react.
3.- Añadir Electron y e instalar dependencias a nuestro proyecto.
npm install electron electron-builder ---save-dev
npm install wait-on concurrently ---save-dev
npm install electron-is-dev
4.- Creamos nuestro archivo electron.js dentro de la carpeta public donde agregaremos las siguientes instrucciones.
const { app, BrowserWindow } = require("electron");
constpath =require("path");
constisDev =require("electron-is-dev");
let mainWindow;
functioncreateWindow() {
// Generate browser for desktop
mainWindow = newBrowserWindow({
width: 1200, // With for desktop app
height: 1000, // Height for desktop app
title: "VRTraining", // Title of my application
autoHideMenuBar: true, // Hide default menu bar in electron
icon: isDev? path.join(process.cwd(), 'public/icons/icon.ico') : '', // Icon desktop app, only for develop
//resizable: false, // Disable the option to expand the window
});
// Open default with windows maximize
mainWindow.maximize();
mainWindow.loadURL(
isDev
?"http://localhost:3000"
:`file://${path.join(__dirname, "../build/index.html")}`
);
if (isDev) 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.- Dentro de la carpeta public en el archivo index.html, agregamos la siguiente etiqueta:
<metahttp-equiv="Content-Security-Policy"content="script-src 'self';" />
6.- Dentro de la carpeta public crearemos una carpeta de nombre icons, la cual contendrá 3 iconos para los tres tipos de sistemas operativos más usados.
6.1- Para Windows será de tipo .ico.
6.2- Para Mac será de tipo .icns.
6.3- Para Linux será de tipo .png
Es de suma importancia que las imágenes tengan una resolución de 256 x 256 pixeles.
7.- Dentro del archivo package.json agregamos los siguientes scripts:
7.1- Agregaremos la información de los autores, descripción del proyecto, un homepage y un main que se conecta con la configuración de Electron.
"author": {
"name": "Inmersys web developer",
"email": "inmersys.developer@gmail.com"
},
"description": "CMS for VRTraining created with react 18 and builded with electron",
"homepage": "./",
"main": "./public/electron.js",
7.2- Agregamos los comandos para ejecutar nuestro proyecto en modo desarrollo y en modo producción para obtener los instalables dependiendo del sistema operativo manejado.
"electron-dev": "concurrently \"SET BROWSER=none&&npm start\"\"wait-on http://localhost:3000&& electron .\"",
"electron-package-mac": "npm run build && electron-builder -m -c.extraMetadata.main=build/electron.js",
"electron-package-win": "npm run build && electron-builder -w -c.extraMetadata.main=build/electron.js",
"electron-package-linux": "npm run build && electron-builder -l -c.extraMetadata.main=build/electron.js"
7.3- Agregamos la configuración de producción para que cuando se nos genere el instalable tenga el nombre, los iconos y formatos correctos que usará cada sistema operativo.
"build": {
"productName": "VRTraining",
"copyright": "Copyright © 2022 Inmersys",
"files": [
"build/**/*",
"node_modules/**/*"
],
"directories": {
"buildResources": "public"
},
"mac": {
"icon": "public/icons/icon.icns",
"target": "dmg"
},
"win": {
"icon": "public/icons/icon.ico",
"target": "nsis"
},
"linux": {
"icon": "public/icons/ico.png",
"target": "deb"
}
}
8.- En las rutas de nuestro proyecto cambiamos el BrowserRouter por HashRouter provenientes de la librería react-router-dom.
import { HashRouter } from"react-router-dom";
9.- Para corroborar que todo funcione correctamente ejecutamos nuestro proyecto.
npm run electron-dev
10. Para obtener los instalables que usaremos en nuestros diferentes sistemas operativos, en la consola ejecutamos, cualquiera de los siguientes comandos:
npm run electron-package-mac
npm run electron-package-win
npm run electron-package-linux
10. Se nos generará dos carpetas, uno build y el otro dist. Dentro de la carpeta dist encontraremos el instalable para poder usar.
11. Vista de nuestra aplicación de escritorio.
12. Firma de nuestra aplicación de escritorio.
……