Como convertir una aplicacion web en react a una de escritorio con electron
En ocaciones ya se ha trabajado y avanzado en un proyecto web, cuando por diferentes motivos tienes que cambiar todo a una aplicacion de escritorio "plop".
Asi, teniendo en cuenta que electron es un contenedor que por debajo es un browser chrome, porque no ejecutar nuestra aplicacion dentro de este contenedor?
Pero espera,¿tambien te gustaria un ejecutable para cada sistema operativo?, bien tambien se puede
- Instalar dependencias
yarn add -D electron-builder electron wait-on concurrently
yarn add electron-is-dev
- Crear el archivo que ejecutara la aplicacion de electron al iniciar
// en el public folder crear un archivo llamado electron.js
touch public/electron.js
- Copiar dentro del archivo electron.js
const electron = require('electron');
const path = require('path');
const isDev = require('electron-is-dev');
const { app, BrowserWindow, nativeImage } = electron;
const appIcon = nativeImage.createFromPath(path.join(__dirname, 'icon.png'));
let mainWindow;
function createWindow(){
mainWindow = new BrowserWindow({ width:900, height:680, icon: appIcon});
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', () => { process.platform !== 'darwin' && app.quit() });
app.on('activate', () => { mainWindow === null && createWindow() });
-
El paso mas importante de todos, selecciona una imagen para que sea el icono de la aplicacion, la debes guardar en
public/icon.png -
Ahora hay que agregar el atributo main al package.json
"main":"public/electron.js",
- Por ultimo un script para ejecutar la aplicacion en una ventana del sistema operativo usando electron
"script":{
"electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\""
}