Hey!

I just tried the v2.1.0, and want to change the default directories for main and preload. Let's say if I want to change the directory from:

./electron/preload

to:

./preload

How to achieve that? Because in build version, preload doesn't load if we change the directories. Thanks in Advance.

Appearance

In the first line of the "watch. MJS" file, I specified process.env.NODE_ENV = 'development'

https://github.com/caoxiemeihao/vite-react-electron/blob/e4087edffe9ec51124e3753228dda6f224a6f484/scripts/watch.mjs#L1

But in the vite.config.mjs file, I always get "production".

https://github.com/caoxiemeihao/vite-react-electron/blob/e4087edffe9ec51124e3753228dda6f224a6f484/scripts/vite.config.mjs#L8

What are the changes in v2.0.0?

1. Based on the Vite official npm create vite command to create the react-ts template
2. Based on the vite-plugin-electron integrated Electron

🎉 Everything looks more natural.

@PAXANDDOS Hey! My Bro. 👋 I reconstructed electron-vite-react, I think v2.0.0 will be easier to use. 😄

Description

This PR is aimed to improve the template by updating the template to follow the official Vite + React + TS template strictly and also upgrade dependencies.

This PR is basically a port of https://github.com/electron-vite/electron-vite-vue/pull/327

Change list

• Properly use the template that Vite + React + TS provided
• Update dependencies
• Update launch.json
• Switch node icon to official svg
• Add "node:" prefix to package
• Add one more example of electron working in bowser

What is the purpose of this pull request?

• [X] Bug fix
• [X] New Feature
• [X] Documentation update
• [X] Other

electron在构建之后无法使用import函数加载对应的样式，控制台没有报错

我尝试在prod中打印import('./light/index.less');是可以获取到对应的内容的，一个成功态的promise

在开发环境上样式文件可以被正常加载， 实现主题切换

export async function loadTheme(type:ThemeType = theme ?? ThemeType.LIGHT) {
  // 获取主题
  if (type === ThemeType.LIGHT) {
    // 加载样式文件
    import('./light/index.less');
    localStorage.setItem('theme', ThemeType.LIGHT);
    document.documentElement.setAttribute('class', ThemeType.LIGHT);
  }
  if (type === ThemeType.DARK) {
    // 加载样式文件
    import('./dark/index.less');
    localStorage.setItem('theme', ThemeType.DARK);
    document.documentElement.setAttribute('class', ThemeType.DARK);
  }
}

I have multiple problems trying to make my electron app work with mongoose, it's work fin in Dev mode but once I try to build it and run it i get a lot of module path errors from mongoose, if i comment this code everything work fine, how I can import mongoose without issues:

const mongoose = require("mongoose");
mongoose.connect("mongodb://localhost/arwa")
  .then(() => console.log("Connected to MongoDB..."))
  .catch((err) => console.log("cannot connect to MongoDB", err));

I discovered that the simple electron-vite-react app with two windows works fine in development mode, but not in "packaged mode":

When commenting the relative part in vite.config.js :

  build: {
    rollupOptions: {
      input: {
        index: join(__dirname, 'index.html'),
        //index_A: join(__dirname, 'index_A.html'),
      },
    },
  },

and in electron/main/index.ts :

app.whenReady().then( () => {
  createMainWindow()
  //Menu.setApplicationMenu(menu)
})

both dev mode and packaged mode work fine:

raphy@pc:~/VitePlayground$ yarn run build
yarn run v1.22.15
$ tsc && vite build && electron-builder
(node:21908) [DEP0025] DeprecationWarning: sys is deprecated. Use util instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
vite v2.9.12 building for production...
✓ 1 modules transformed.
dist/electron/preload/ipcpreload.js   2.50 KiB / gzip: 0.99 KiB
dist/electron/preload/ipcpreload.js.map 11.79 KiB
vite v2.9.12 building for production...
✓ 1 modules transformed.
dist/electron/main/index.js   1.34 KiB / gzip: 0.77 KiB
vite v2.9.12 building for production...
✓ 36 modules transformed.
dist/index.html           0.61 KiB
dist/style.9f994278.css   1.46 KiB / gzip: 0.63 KiB
dist/index.90df7efd.js    140.63 KiB / gzip: 45.34 KiB
  • electron-builder  version=23.0.3 os=5.13.0-51-generic
  • loaded configuration  file=/home/raphy/VitePlayground/electron-builder.json5
  • writing effective config  file=release/2.0.0/builder-effective-config.yaml
  • packaging       platform=linux arch=x64 electron=19.0.4 appOutDir=release/2.0.0/linux-unpacked
  • building        target=AppImage arch=x64 file=release/2.0.0/YourAppName-Linux-2.0.0.AppImage
  • application Linux category is set to default "Utility"  reason=linux.category is not set and cannot map from macOS docs=https://www.electron.build/configuration/linux
Done in 8.18s.

When index_A is activated in vite.config.ts :

  build: {
    rollupOptions: {
      input: {
        index: join(__dirname, 'index.html'),
        index_A: join(__dirname, 'index_A.html'),
      },
    },
  },

and the menu part is activatedin /electron/main/index.ts :

app.whenReady().then( () => {
  createMainWindow()
  Menu.setApplicationMenu(menu)
})

the development mode works fine as before :

raphy@pc:~/VitePlayground$ yarn dev
yarn run v1.22.15
$ vite
(node:22320) [DEP0025] DeprecationWarning: sys is deprecated. Use util instead.
(Use `node --trace-deprecation ...` to show where the warning was created)

  vite v2.9.12 dev server running at:

  > Local: http://127.0.0.1:7777/

  ready in 215ms.

vite v2.9.12 building for development...

watching for file changes...

build started...
vite v2.9.12 building for development...

watching for file changes...

build started...
✓ 1 modules transformed.
transforming (1) electron/main/index.tsdist/electron/preload/ipcpreload.js   4.21 KiB / gzip: 1.21 KiB
dist/electron/preload/ipcpreload.js.map 12.28 KiB
built in 92ms.
✓ 2 modules transformed.
dist/electron/main/index.js   3.95 KiB / gzip: 1.25 KiB
built in 92ms.
[22373:0618/165407.120600:ERROR:gpu_memory_buffer_support_x11.cc(44)] dri3 extension not supported.
4:54:07 PM [vite] warning: Top-level "this" will be replaced with undefined since this file is an ECMAScript module
32 |              lineNumber: 15,
33 |              columnNumber: 13
34 |            }, this)
   |               ^
35 |          }, void 0, false, {
36 |            fileName: _jsxFileName,

  Plugin: vite:esbuild
  File: /home/raphy/VitePlayground/src/app/components/App.tsx

But the production mode, the release produced with yarn run build does not work anymore :

raphy@pc:~/VitePlayground$ yarn run build
yarn run v1.22.15
$ tsc && vite build && electron-builder
(node:22549) [DEP0025] DeprecationWarning: sys is deprecated. Use util instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
vite v2.9.12 building for production...
✓ 1 modules transformed.
dist/electron/preload/ipcpreload.js   2.50 KiB / gzip: 0.99 KiB
dist/electron/preload/ipcpreload.js.map 11.79 KiB
vite v2.9.12 building for production...
✓ 2 modules transformed.
dist/electron/main/index.js   2.40 KiB / gzip: 1.02 KiB
vite v2.9.12 building for production...
✓ 39 modules transformed.
dist/index_A.html          0.67 KiB
dist/index.html            0.67 KiB
dist/index.2ba947a6.js     1.71 KiB / gzip: 0.75 KiB
dist/index_A.ab7b482d.js   0.33 KiB / gzip: 0.25 KiB
dist/style.9f994278.css    1.46 KiB / gzip: 0.63 KiB
dist/index.8bf949c4.js     139.11 KiB / gzip: 44.69 KiB
  • electron-builder  version=23.0.3 os=5.13.0-51-generic
  • loaded configuration  file=/home/raphy/VitePlayground/electron-builder.json5
  • writing effective config  file=release/2.0.0/builder-effective-config.yaml
  • packaging       platform=linux arch=x64 electron=19.0.4 appOutDir=release/2.0.0/linux-unpacked
  • building        target=AppImage arch=x64 file=release/2.0.0/YourAppName-Linux-2.0.0.AppImage
  • application Linux category is set to default "Utility"  reason=linux.category is not set and cannot map from macOS docs=https://www.electron.build/configuration/linux
Done in 8.11s.
raphy@pc:~/VitePlayground$ 

raphy@pc:~/VitePlayground/release/2.0.0$ ./YourAppName-Linux-2.0.0.AppImage 
[22710:0618/165813.204491:ERROR:gpu_memory_buffer_support_x11.cc(44)] dri3 extension not supported.

I tried to modify the path also in packaged mode :

  if (app.isPackaged) {
    //WindowTypeA.loadFile(join(__dirname, '../../index_A.html'))
    WindowTypeA.loadURL(url + '/../../index_A.html')
  } else {
    WindowTypeA.loadURL(url + '/../../index_A.html')
    WindowTypeA.webContents.openDevTools()

}

But again it does not work

Based on what I read here: https://vitejs.dev/guide/build.html#multi-page-app the build configuration :

  build: {
    rollupOptions: {
      input: {
        index: join(__dirname, 'index.html'),
        index_A: join(__dirname, 'index_A.html'),
      },
    },

seem ok

Shouldn't be doing everyhing electron-builder ?

The boilerplate indicated in the electron-builder DOCS : https://www.electron.build/#boilerplates electron-vite-vue , in the build phase : https://github.com/electron-vite/electron-vite-vue/blob/main/package.json#L10 uses the same steps: vite build && electron-builder

What am I missing or / and doing wrongly in thepackaging phase ?

Here you can find the repo, which is nothing else than the electron-vite-react app, where I added a second window, that can be opened from the menu :

https://github.com/raphael10-collab/VitePlayground.git

Looking forward to your kind help

With contextIsolation: true the app doesn't show up

As described in the Electron Docs: https://www.electronjs.org/docs/latest/tutorial/context-isolation/ , contextIsolation is important for security purposes

How to make it work with contextIsolation: true ?

Issue 1: The entry point is "dist-electron/main/index.js" but should be "dist-electron/electron/main/index.js" i guess?

Issue 2: Once I change the entry point I can start the application in development mode but the release version which I created with yarn build won't start. It shows the following error message:

(node:24752) electron: Failed to load URL: file:///D:/electron-vite-react/release/2.1.0/win-unpacked/resources/app.asar/dist-electron/dist/index.html with error: ERR_FILE_NOT_FOUND
(Use `YourAppName --trace-warnings ...` to show where the warning was created)

I can see that you for some reason removed the Antd. Could you please guide me how to include it again but this time vite to build it from less? Thank you

Hey, thanks for this amazing project!

I extended some things and created Vitron from it.

Maybe you find my gitactions useful.

• Auto-Build win, mac, linux binaries and create a release with autogenerated release-text from git commit messages
• Auto-Build and deploy inner react app to github pages

I also added a DarkMode Toggler, which will toggle muiTheme AND nativeTheme (incl. devtools)

as examples I extended your electron-store example and added a Zustand-example.

Custom Title Bar and System Tray can be activated via package.json

You can take anything you want from there. (Would be an honor) Or ofc you guys can also join Vitron, i will give you access rights directly <3

Add Playwright Support

What I did

1. ran npm init playwright@latest
2. updated their example test to fit this repository

How you can test what I did

1. install all the dependencies npm i
2. run npm run build
3. run npm run e2e

What I'd like help on fixing:

1. currently its required to run npm run build before running tests, it'd be nice during development to be able to rely on the vite server

notes:

I also notice that with the vite dev server and the electron process, the two run somewhat independenly and in certain senarios either by closing the vite dev server or the electron app, one of the processes doesn't gracefully shutdown which can be a bit of an annoyance during development.

I'm just trying to use execa in the main process with:

import { execaCommand } from "execa"

But I hit the Error [ERR_REQUIRE_ESM]: require() of ES Module issue.

If I switch to a dynamic import:

const { execaCommand } = await import("execa")

This works fine with npm run dev, BUT breaks when building with npm run build with the following error:

(I'm using electron-unhandled to capture the error)

Error: ENOTDIR: not a directory, stat '/Users/johnlindquist/dev/electron-vite-react/release/2.1.0/mac-arm64/electron-vite-react.app/Contents/Resources/app.asar/dist-electron/main/node_modules/execa'

Thanks for any help!

Do you have any idea on how you can get the debugging for the Node side to work in phpstorm or webstorm?

It successfully launches the program but I can't breakpoint any of the electron side.

I am trying to use electron-vite-react ts template. But I have an error when I try to authenticate with firebase. I fill my credentials right,

I use the method of SDK :

import { signInWithEmailAndPassword } from "firebase/auth";

  const handleLogin = () => {
    const data = getValues();
    setIsLoading(true);
    if (data.email && data.password) {
      signInWithEmailAndPassword(auth, data.email, data.password)
        .then((cred) => {
          setIsLoading(false);
          console.log("user logged in:", cred);
        })
        .catch((err) => {
          console.log("error", err);
// throws the error here. Firebase: Error (auth/network-request-failed)
          setIsLoading(false);
          console.log(err.message);
        });
    }
  };

throws the error:

Firebase: Error (auth/network-request-failed)

I was watching the console and see the Request and response. And the server of firebase/auth validate correctly the user. But I don't get the data in the Frontend. So I would think this is a vite problem. But I don't understand how could I solve it.

I have the repository here if you want to download it. https://github.com/ivanandresdiaz/vite-electron-firebase

https://vitejs.dev/guide/assets.html#importing-asset-as-url does not work in the build because URLs are not the same in dev and prod. And that's the root cause of https://github.com/electron-vite/electron-vite-react/issues/78 https://github.com/electron-vite/electron-vite-react/commit/71dd5078d99a8dacab297433de894e101307d286 is a hack to fix that.

However,

Something like./electron.png is actually not valid usage for vite. It's neither via public nor via dynamic import. It just happens to work in dev and prod because of the particular route of App.tsx.

The valid way to do this in vite is to use /electron.png. But that does not work in this boilerplate because the URL is not handled correctly.