my-electron-app/
├── electron/
│   ├── main.js       # Điểm vào chính của tiến trình chính
│   └── preload.js    # Tập tin preload (cầu nối)
├── src/
│   ├── App.jsx       # Một component React đơn giản
│   └── main.jsx      # Điểm vào của tiến trình renderer
├── index.html
├── package.json
└── vite.config.js

{
  "name": "my-electron-app",
  "version": "0.1.0",
  "main": "electron/main.js", // <-- Quan trọng: Điểm đến của tập tin chính Electron
  "scripts": {
    "dev": "vite",
    "build": "vite build && electron-builder"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.2.1",
    "electron": "^28.2.1",
    "electron-builder": "^24.9.1",
    "vite": "^5.0.12",
    "vite-plugin-electron-renderer": "^0.14.5"
  },
  "build": { // <-- Cấu hình cho electron-builder
    "appId": "com.my-app.id",
    "productName": "My Awesome App",
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "directories": {
      "buildResources": "assets",
      "output": "release"
    }
  }
}

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

export default defineConfig({
  plugins: [
    react(),
    electron(), // <-- Plugin chính cho Electron
  ],
});

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

// Xử lý việc tạo/xóa shortcut trên Windows khi cài đặt/gỡ cài đặt.
if (require('electron-squirrel-startup')) {
  app.quit();
}

const createWindow = () => {
  // Tạo cửa sổ trình duyệt.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'), // <-- Liên kết đến tập tin preload
      contextIsolation: true, // <-- Tính năng bảo mật
      nodeIntegration: false, // <-- Tính năng bảo mật
    },
  });

  // Tải ứng dụng.
  if (process.env.VITE_DEV_SERVER_URL) {
    mainWindow.loadURL(process.env.VITE_DEV_SERVER_URL);
    mainWindow.webContents.openDevTools();
  } else {
    mainWindow.loadFile(path.join(__dirname, '../dist/index.html'));
  }
};

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

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

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

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

contextBridge.exposeInMainWorld('api', {
  send: (channel, data) => {
    let validChannels = ['toMain'];
    if (validChannels.includes(channel)) {
      ipcRenderer.send(channel, data);
    }
  },
  receive: (channel, func) => {
    let validChannels = ['fromMain'];
    if (validChannels.includes(channel)) {
      ipcRenderer.on(channel, (event, ...args) => func(...args));
    }
  }
});

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

import React from 'react';

function App() {
  const handleClick = () => {
    window.api.send('toMain', 'Hello from the Renderer Process!');
  };

  React.useEffect(() => {
    window.api.receive('fromMain', (data) => {
      console.log(`Received from main: ${data}`);
    });
  }, []);

  return (
    <div>
      <h1>Hello from Vite + React + Electron!</h1>
      <button onClick={handleClick}>Gửi tin nhắn tới Main</button>
    </div>
  );
}

export default App;