React + Vite + Electron

Este proyecto combina React, Vite y Electron para crear aplicaciones de escritorio modernas con un entorno de desarrollo rápido y eficiente. A continuación, se detallan los pasos para configurar y ejecutar el proyecto.

Pasos seguidos para la configuracion y creacion de esta biblioteca.

1. Crear el proyecto base

Ejecuta los siguientes comandos en la terminal para configurar el entorno inicial:

npm init --y
npm create vite@latest . --template react
npm install
npm run dev
npm install electron --save-dev
npm install concurrently --save-dev
npm install cross-env --save-dev

Modificar el archivo package.json

Realiza los siguientes cambios en el archivo package.json:

{
  "name": "<Cambiar el nombre del proyecto a uno único para evitar conflictos con npm>",
  "version": "0.0.0",
  "description": "Una aplicación creada con Electron, React y Vite.",
  "author": "Equipo de desarrollo de Stroka.com",
  "type": "module",
  "main": "main.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development concurrently \"vite\" \"npm run start\"",
    "start": "electron .",
    "comp": "vite build && electron-builder",
    "postinstall": "electron-builder install-app-deps"
  }
}

Agregar el archivo main.js

Crea un archivo llamado main.js en el directorio raíz del proyecto. Este archivo configura la ventana principal de la aplicación.

/* eslint-disable no-undef */
import { fileURLToPath } from "url";
import { dirname, join } from "path";
import { app, BrowserWindow } from "electron";

// Configuración de __dirname para módulos ES
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = "true";

let mainWindow;

app.on("ready", () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: join(__dirname, "preload.js"),
      nodeIntegration: true,
    },
  });

  if (process.env.NODE_ENV === "development") {
    mainWindow.loadURL("http://localhost:<Ajustar el puerto de Vite>");
  } else {
    mainWindow.loadFile(join(__dirname, "./StrokaPos/index.html"));
  }
});

app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
        preload: join(__dirname, "./preload.js"),
        nodeIntegration: true,
        contextIsolation: false,
        enableRemoteModule: true,
      },
    });

    if (process.env.NODE_ENV === "development") {
      mainWindow.loadURL("http://localhost:<Ajustar el puerto de Vite>");
    } else {
      mainWindow.loadFile(join(__dirname, "./StrokaPos/index.html"));
    }
  }
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") app.quit();
});

Agregar el archivo preload.js

Crea un archivo llamado preload.js en el directorio raíz del proyecto. Este archivo expone una API segura al proceso de renderizado.

const { contextBridge, ipcRenderer } = require("electron");

// Exponer una API segura al proceso de renderizado
contextBridge.exposeInMainWorld("api", {
  send: (channel, data) => {
    const validChannels = ["toMain"];
    if (validChannels.includes(channel)) {
      ipcRenderer.send(channel, data);
    }
  },
  receive: (channel, func) => {
    const validChannels = ["fromMain"];
    if (validChannels.includes(channel)) {
      ipcRenderer.removeAllListeners(channel);
      ipcRenderer.on(channel, (event, ...args) => func(...args));
    }
  },
});

Consideraciones

1. Puerto de Vite: En el archivo main.js, reemplaza <Ajustar el puerto de Vite> con el puerto correcto que utiliza el servidor de desarrollo de Vite.
2. Carpeta de producción: Asegúrate de que vite build genere los archivos en la carpeta StrokaPos para que Electron pueda cargarlos correctamente.
3. Ejecución en desarrollo: Usa npm run dev para iniciar el servidor de desarrollo. Esto ejecutará tanto Vite como Electron.

Con esta configuración, tendrás un proyecto funcional que combina React, Vite y Electron. ¡Listo para crear aplicaciones de escritorio modernas!