electron-vite / electron-vite-react Goto Github PK
View Code? Open in Web Editor NEW:electron: Electron + Vite + React + Sass boilerplate.
Home Page: https://electron-vite.github.io
License: MIT License
:electron: Electron + Vite + React + Sass boilerplate.
Home Page: https://electron-vite.github.io
License: MIT License
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)
Hi! First of all, I'm new to Electron and its ecosystem, but your Vite-React boilerplate is the best I found so far, love it! ❤️
I've got stuck importing stuff from electron. For example:
// src/renderer/src/App.tsx
import { clipboard } from "electron"
function App() {
const addToClipboard = () => {
clipboard.writeText("Example String", "selection")
console.log(clipboard.readText("selection"))
}
return (
<div className='App'>
<button onClick={addToClipboard}>Click me</button>
</div>
)
}
export default App
And I only get this error in the console:
Uncaught ReferenceError: require is not defined at electron.js:5
Also to mention, there are a few errors in the terminal which appears after running npm run dev
:
[0122/180339.314:ERROR:registration_protocol_win.cc(102)] CreateFile: ═х єфрхЄё эрщЄш єърчрээ√щ Їрщы. (0x2)
[0122/180339.358:ERROR:registration_protocol_win.cc(102)] CreateFile: ═х єфрхЄё эрщЄш єърчрээ√щ Їрщы. (0x2)
[14232:0122/180339.788:ERROR:CONSOLE(1)] "SyntaxError: Unexpected end of JSON input", source: devtools://devtools/bundled/entrypoints/main/main.js (1)
The first two of them are probably because I have the Russian language as the system default and it tries to create files with a Chinese name (?)
I wonder if I'm doing something wrong or just missing something. Can you help me?
Node v17.2.0
NPM v8.1.4
Windows 11 build 22000
"devDependencies": {
"@types/react": "^17.0.33",
"@types/react-dom": "^17.0.10",
"@vitejs/plugin-react": "^1.0.7",
"electron": "^15.3.0",
"electron-builder": "^22.13.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"typescript": "^4.4.4",
"vite": "^2.6.13",
"vite-plugin-resolve": "^1.3.1"
}
When building an app with multiple inputs:
build: {
rollupOptions: {
input: {
index: path.resolve(__dirname, 'index.html'),
panel: path.resolve(__dirname, 'panel.html')
}
}
},
rollup automatically creates a shared app.<hash>.js
file with all the common modules and requires it from both entry files.
However with Electron properly configured, require
is not available in the renderer, so the app doesn't work. What is the correct way to make this work, either by inlining the common modules in both (larger file size) or selectively allowing require (I'd rather not?).
by working on jsx it seems like vite is not detecting any changes at all , any thing to add to config ?
Hi everyone, i have a big problem here, when i develop my app and run with npm run dev
command i can see one state of my app who its correct (latest changes) but when i run npm run build
command and open my App Image app (Im working on Ubuntu) i see a before state of my app. I will attach images below from my 2 apps (dev and prod)
This is dev environment with 3 different routes and buttons to change between
This is prod environment, anything visible, previous to create routes
My package.json scripts are:
"scripts": {
"dev": "vite",
"build": "tsc && vite build && electron-builder build",
"build:win": "tsc && vite build && electron-builder -w",
"build:mac": "tsc && vite build && electron-builder -m",
"build:gnu": "tsc && vite build && electron-builder -l"
},
And my electron-builder conf are:
{
appId: "com.caja.mc",
productName: "Caja MC",
copyright: "Copyright © 2022 ${author}",
asar: true,
directories: {
output: "release/${version}",
buildResources: "electron/resources",
},
files: ["./dist", "./src", "./node_modules"],
win: {
target: [
{
target: "nsis",
arch: ["x64"],
},
],
artifactName: "${productName}-Windows-${version}-Setup.${ext}",
},
nsis: {
oneClick: false,
perMachine: false,
allowToChangeInstallationDirectory: true,
deleteAppDataOnUninstall: false,
},
mac: {
target: ["dmg"],
artifactName: "${productName}-Mac-${version}-Installer.${ext}",
},
linux: {
target: ["AppImage"],
artifactName: "${productName}-Linux-${version}.${ext}",
category: "Office"
},
}
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
i'm actually using vite react and tailwind with default config, this is my postcss.config.js
:
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }
and I'm also using a syncfusion Grid table that has a built in css classes, since I'm using it in multiple other components, i just wanted to hide this table header in just one react component, so i did add to my component a css file named noHeaderGrid.module.css
with this code on it :
.e-grid .e-gridheader .e-columnheader{ display: none ; }
the style did apply, but to all other grid tables in other component also, why is css modules not working properly, everything is global
How to specify in https://github.com/electron-vite/electron-vite-react/blob/main/vite.config.ts different apps
each for a different window?
For example:
/src/app
/src/app_A
/src/app_B
where App.tsx
and main.tsx
are in /src/app
:
/src/app/App.tsx
/src/app/main.tsx
/src/app_A/App_A.tsx
/src/app_A/main_A.tsx
/src/app_B/App_B.tsx
/src/app_B/main_B.tsx
⨯ Application entry file "build/electron.js" in the "xxxxxx/release/1.0.0/mac-arm64/Portkey.app/Contents/Resources/app.asar"
does not exist. Seems like a wrong configuration. failedTask=build stackTrace=Error: Application entry file "build/electron.js" in the
"xxxxxx/release/1.0.0/mac-arm64/Portkey.app/Contents/Resources/app.asar" does not exist. Seems like a wrong configuration.
打包mac时遇到如上错误
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()
}
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
Hi, Thanks for your amazing boilerplate!
I noticed that when you resize the window the html on the inside behaves very laggy.
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);
}
}
现在的版本换用了新的electron vite插件,但是注意到打包后没有进行任何的混淆,几乎就是源代码没动,是否计划支持混淆呢?
最新创建的项目升级到vite-electron-plugin
之后,在react应用内部使用nodejs Api行不通了
const M = require("url");
export default M;
export const Url = M.Url;
export const parse = M.parse;
export const resolve = M.resolve;
export const resolveObject = M.resolveObject;
export const format = M.format;
export const URL = M.URL;
export const URLSearchParams = M.URLSearchParams;
export const domainToASCII = M.domainToASCII;
export const domainToUnicode = M.domainToUnicode;
export const pathToFileURL = M.pathToFileURL;
export const fileURLToPath = M.fileURLToPath;
export const urlToHttpOptions = M.urlToHttpOptions;
如何同时支持web端运行打包?
I encounter this problem in VS Code when using electron-vite with react:
[
{
"resource": "path/to/project/tsconfig.json",
"owner": "typescript",
"severity": 8,
"message": "Cannot write file 'path/to/project/dist/main/index.cjs' because it would overwrite input file.",
"source": "ts",
"startLineNumber": 1,
"startColumn": 1,
"endLineNumber": 1,
"endColumn": 2
}
]
Is there any way to fix it?
在 dev mode 下
useEffect(() => {
console.log(111);
}, [])
似乎会调用两次,打包后是正常的,是什么问题呢
When running npm run build
in windows environment
electron-builder
tool does not run, electron-builder.js
file runs
hi, I'm experiencing a weird issue just about opening Electron App, look i have built a new electron App named JSTools
using your plugin electron-vite-react
for windows platform, and everything worked fine i can launch it and use it, i did change it's appId
productName
icon
in electron-builder.json5, when it's running it's show JSTools.exe
in my taskbar process list, but the problem happen when i try to launch it when I'm working in another App on vscode and dev vite is running, i can't launch my app , same happen if JSTools.exe
is running, and launch npm run dev vite, when dev vite is run i get this in my taskbar :
when my JSTools.exe
is run i get this in my taskbar:
they are not the same process why i cant open them simultaneously, i also did change ports for dev vite:
I have a question about this issue:
https://github.com/electron-vite/electron-vite-react#-be-aware
Does this issue only impact apps that intend to use the local file system and other Node.js APIs, or does this issue impact any usage of Vite with Electron?
For example, can the integration be disabled for thin client apps that will be talking to a remote server?
In the first line of the "watch. MJS" file, I specified process.env.NODE_ENV = 'development'
But in the vite.config.mjs
file, I always get "production".
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.
I tried to run the app with npm run build
but wasn't able to build the app and rather it leads to opening the file electron-builder.js
.
And I have read the docs on https://www.electron.build/cli.html. Which it default to .yml .json .json5
file extension.
So I'm wondering is there some extra configuration needed, to allow running electron-builder CLI with .js extension?
$ npm run dev
node scripts/watch.mjs
file://vite-react-electron-main/scripts/watch.mjs:6
import { createServer, build as viteBuild } from 'vite'
^^^^^
SyntaxError: The requested module 'vite' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'vite';
preload有单独的文件夹,worker文件是否应该也有单独的文件夹进行编译输出呢,vite不是很熟悉
during development it works fine, but with production build, once built ipcRenderer inside window in react is not recognized
在页面无法获取到 window.electronAPI
Hey, thanks for this amazing project!
I extended some things and created Vitron from it.
Maybe you find my gitactions useful.
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
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));
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
?
Hi, thanks for your hard work on this template. I was wondering if you could point out how to add a linux icon here?
Thanks again!
Hello and thank you for your template.
How can I setup eslint for this project? I have a eslintrc.json file but it does not seem to lint my files properly
I tried setting the same breakpoints outlined in the preview of the readme and they don't seem to be working.
this is my version info for VSCode:
Version: 1.71.0
Commit: 784b0177c56c607789f9638da7b6bf3230d47a8c
Date: 2022-09-01T07:25:10.472Z
Electron: 19.0.12
Chromium: 102.0.5005.167
Node.js: 16.14.2
V8: 10.2.154.15-electron.0
OS: Linux x64 5.14.0-1050-oem snap
Sandboxed: No
I'm also running Ubuntu 20.04 LTS
This issue consists of 2 parts: build command failing & release build not working. Tested on macOS Monterey M1.
electron-vite-react/package.json
Line 9 in d6f989c
But should be
"main": "dist-electron/electron/main/index.js",
After making that adjustment, the build command succeeds, however, the release does not work and shows the following error in the dev tools:
Not allowed to load local resource: file:///Users/wouter/Documents/demo/electron-vite-react/release/2.1.0/mac-arm64/YourAppName.app/Contents/Resources/app.asar/dist-electron/dist/index.html
In electron-vite-react the developer mode serves index.html from a web server on localhost, but the build serves that file using the file:// protocol. Can this be changed such that development mode also uses a file?
The reason I'm requesting this is that http:
and file:
have a different permission structure in browsers, so things that work fine in development mode could break in production, and this is a breeding ground for bugs.
For example, cookies work on localhost but not on the file:
protocol. Conversely, loading images from disk (with the file:
protocol) and showing them works if you load them from a page served over the file:
protocol but are prevented from being shown due to cross-origin security on localhost.
Making sure the development and production environments of your app are served over the same protocol means there is a smaller chance for bugs related to that difference.
Hi,
first of all THANKS for this amazing project.
Would it be possible to add a yarn start
script to start the devserver for inner react app without the electron wrapper?
I would like to start and build the web-project isolated (like yarn vite) ontop of the current yarn dev
and yarn build
for the electron
as naming, we could also use something like:
yarn dev:renderer
yarn build:renderer
Thank you soo much
Blade
The images in the development are work normally, which is presumed to be caused by the BUG of processing dynaimc-import images when Vite is built.
在开发环境图片正常显示,推测是 vite 构建时处理动态引入的图片出现问题导致的
yarn && yarn build
./release/2.0.0/win-unpacked
, click and run YourAppName.exe
Add VSCode debug launch/tasks for both of the following to help make setting break points a possiblity.
require("自己c++编译.node文件",报了这个错误
Error: Cannot find module './addon.node'
Require stack:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.