ReactJS con Electron

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

npm i --save-dev electron

package.json

Para generar el ejecutable, habrá que ejecutar primero el build y luego el electron-pack.

El ejecutable se generará dentro de la carpeta dist.

{
  ...
  "main": "./bin/main.js",
  "scripts": {
    ...
      "build": "cross-env NODE_ENV=production webpack -p",
      "start-electron": "cross-env NODE_ENV=development electron .",
      "electron-pack": "electron-builder --win"
  },
"build": {
    "asar": false,
    "appId": "template",
    "files": [
      "./public/electron-pack.js",
      "dist/**/*"
    ],
    "directories":{
      "buildResources": "dist"
    }
  },

webpack.config.js

const publicPath = development ? '/' : './';

public/electron-pack.js

const { app, BrowserWindow } = require("electron");
const path = require("path");

const development = process.env.NODE_ENV === 'development';

const url = development
  ? 'http://localhost:8080'
  : `file://${path.join(__dirname, "../dist/index.html")}`

function createWindow() {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });
  win.loadURL(url);
}

app.on("ready", createWindow);

public/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Generar el ejecutable

npm install electron-builder --save-dev

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.