Integrating Front‑End Frameworks (React/Vue)

Integrating Front‑End Frameworks (React/Vue)

Electron does not care which UI library you use – just bundle it as you would for a normal web app.

Using Vite with React

npm create vite@latest renderer -- --template react
cd renderer
npm install
npm run build   # produces dist/

In main.js point the window at the built index.html:

win.loadFile(path.join(__dirname, '../renderer/dist/index.html'));

Using Vite with Vue

npm create vite@latest renderer -- --template vue

Hot‑reload during development – run Vite dev server and point the window to http://localhost:5173.

win.loadURL('http://localhost:5173');

Remember to disable nodeIntegration and use a preload bridge for any privileged calls.