Creando una aplicación con electron y react

Creación del proyecto

npm create vite@latest dummy -- --template react

npm i

cd dummy

Instalar dependencias

npm install electron electron-vite --save-dev

Modificar package.json

// modificar
"scripts": {
    "dev": "electron-vite dev -w",
    "build": "electron-vite build",
    "preview": "electron-vite preview"
},

// eliminar
"type": "module"

// agregar
"main": "./out/main/main.js"

Creación de carpetas

mkdir src/renderer

mkdir src/renderer/src

mkdir src/main

mkdir src/preload

Creación de archivo src/main/main.js

import { app, BrowserWindow } from 'electron';
import * as path from 'path';

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({});

  mainWindow.loadURL('http://localhost:5173');
  mainWindow.on('closed', () => mainWindow = null);
}

app.whenReady().then(() => {
  createWindow();
});

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

app.on('activate', () => {
  if (mainWindow == null) {
    createWindow();
  }
});

Creación de archivo vacío src/preload/preload.js

touch src/preload/preload.js

Creación de archivo electron.vite.config.js

import { defineConfig } from "electron-vite";
import react from '@vitejs/plugin-react';

export default defineConfig({
    publicDir: false,
    main: {},
    preload: {},
    renderer: {
        plugins: [react()]
    }
});

Mover archivos

mv index.html src/renderer

mv src/main.jsx src/index.css src/App.jsx src/App.css  src/renderer/src

mv src/assets src/renderer/src

Modificar src/renderer/src/App.jsx

import { useState } from 'react'
// import reactLogo from './assets/react.svg'
// import viteLogo from '/vite.svg'
import './App.css'

Ejecutar la aplicación

npm run dev