proyectonpm_prueba002/README.md

Una aplicación creada con Electron, React y Vite. de prueba para subir a npm

# 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:

```bash
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`:

```json name=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.

```javascript name=main.js
/* 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.

```javascript name=preload.js
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!