electron + react + vite how to build correctly

Question

I'm trying to create a windows app with electron + react + vite, which is extremely faster and smaller. But I'm having problems compiling with electron-builder. you can see entire code here... https://github.com/collaxd/template-electron-react/tree/vite So after build with some erros and open software on console you can see

Not allowed to load local resource: file:///C:/Users/Colla/Desktop/Programming/electron/template-react-electron/dist/win-unpacked/resources/app.asar/public/build/index.html

package.json

{
  "name": "template-react-electron",
  "private": true,
  "version": "0.0.0",
  "main": "public/electron.js",
  "homepage": "./",
  "scripts": {
    "dev": "concurrently \"electronmon . \" \"vite\"",
    "build": "rm -rf dist/ build/ && vite build && electron-builder && cd dist && explorer ."
  },
  "build": {
    "target": "win",
    "win": {
      "icon": "build/icon.png"
    }
  },
  "dependencies": {
    "electron-is-dev": "^2.0.0",
    "electron-squirrel-startup": "^1.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.0.1",
    "concurrently": "^7.3.0",
    "electron": "^20.1.0",
    "electron-builder": "^23.3.3",
    "electronmon": "^2.0.2",
    "vite": "^3.0.7"
  }
}

vite.config.js

    import { defineConfig } from 'vite';
    import react from '@vitejs/plugin-react';
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [react()],
      server: {
        open: false, // do not open the browser as we use electron
        port: 3333
      },
      build: {
        outDir: './build'
      }
    });

main.js (electron)

const { app, BrowserWindow } = require('electron');
const isDev = require('electron-is-dev');
const { join } = require('path');

function createWindow() {
  // Create a browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    icon: './public/icon.png',
    webPreferences: { preload: join(__dirname, 'preload.js') }
  });
  console.log();

  // Load correctly url
  const url = isDev ? `http://127.0.0.1:3333/` : `file://${join(__dirname, '..', 'build', 'index.html')}`;
  // const url = 'C:\\Users\\Colla\\Desktop\\Programming\\electron\\template-react-electron\\build\\index.html';
  win.loadURL(url);
  // Open the DevTools.
  isDev && win.webContents.openDevTools();
}

// app ready
app.whenReady().then(createWindow);
// close all win
app.on('window-all-closed', () => process.platform !== 'darwin' && app.quit());
// etc
app.on('activate', () => BrowserWindow.getAllWindows().length === 0 && createWindow);

score 1 · Answer 1 · answered Aug 29 '22 at 15:37

1

I believe with your vite config, you can remove the "build" part of the path when loading the URL in electron:

  // Load correctly url
  const url = isDev ? `http://127.0.0.1:3333/` : `file://${join(__dirname, '..', 'index.html')}`;

vite should bundle both main.js and your react app in the build/ directory, so adding it in the url to load from will target the wrong file. You can also extract the contents of the app.asar generated to ensure you're targeting the correct file

answered Aug 29 '22 at 15:37

Derek Boylan

11
1

ye, my app.asar is a blank index.html, I tried everything about the path and no sucess – Collaxd Aug 30 '22 at 16:23
@Collaxd did you find any solution? I'm facing same issue – Swapnil Soni Apr 28 '23 at 04:11
actually I'm using `npm create electron-vite` [this](https://github.com/electron-vite/electron-vite-react) @SwapnilSoni – Collaxd May 01 '23 at 12:54
Thanks @Collaxd actually I figured it out. This app needs either HashRouter or MemoryRouter. BrowserRouter wont work in this electron app case – Swapnil Soni May 02 '23 at 13:09

score 1 · Answer 2 · answered Aug 29 '22 at 16:29

1

I had the same problem, but I found this template on github and it really saves me a lot of setup work, you just run the script npm create electron-vite and it works, try it on both linux and windows (using electron-builder for distribution).

answered Aug 29 '22 at 16:29

Mole de Astoria

41
4

3

ty alot, but It uses typescripts wich I don't want to learn now :( – Collaxd Aug 30 '22 at 14:43

score 1 · Answer 3 · answered Nov 17 '22 at 11:07

1

Found this in the Electron-Vue project documentation.

npm create @quick-start/electron

I did all for you. And it supports Javascript

answered Nov 17 '22 at 11:07

Tanbin Hassan

23
3

score 0 · Answer 4 · answered Jun 13 '23 at 12:07

I was also facing an issue with electron builder but I debugged it and checked there is no relevant path attached to the build folder of Vite. I have added the base property and set it to "./" and after building that electron+react+vite project it's working like a charm.

after changes vite.config.ts looks like this

export default defineConfig({
  base:'./',
  plugins: [react()],
})

electron + react + vite how to build correctly

4 Answers4