An easy way to start a front-end project.
License: MIT License
An easy way to start a front-end project
| Package | Description | Version (click for changelogs) |
|---|---|---|
| @quick-start/create-electron | An easy way to start an Electron project |  |
| @quick-start/create-docs | An easy way to generate a static site |  |
| @quick-start/create-node-lib | An easy way to start a Node.js library |  |
| @quick-start/create-monorepo | An easy way to start a monorepo project |  |
See Contributing Guide.
Consider adding ESM support templates, if you can support ESM in TypeScript templates, even better
create-electron
add templates that supports the ESM
No response
No response
I ran npm create @quick-start/electron electron-test -- --template react-ts , and then from the electron-test directory ran npm install, and got the following error:
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c electron-builder install-app-deps
npm ERR! • electron-builder version=23.6.0
npm ERR! • loaded configuration file=C:\Users\ryant\Repos\MetaVision\apps\electron\electron-builder.yml
npm ERR! ⨯ Cannot compute electron version from installed node modules - none of the possible electron modules are installed and version ("^21.3.3") is not fixed in project.
npm ERR! See https://github.com/electron-userland/electron-builder/issues/3984#issuecomment-504968246
If I open package.json and change "electron": "^21.3.3" to "electron": "21.3.3", then npm install succeeds and I can run the app.
create-electron
npm
dev server running for the electron renderer process at:
➜ Local: http://127.0.0.1:5173/
➜ Network: use --host to expose
error during start dev server and electron app:
Error: Electron uninstall
at getElectronPath (D:\MyFile\Working-Company\Project\stepOnAMine\node_modules.pnpm\[email protected][email protected]\node_modules\electron-vite\dist\chunks\lib-ddb42891.js:68:19)
at Object.startElectron (D:\MyFile\Working-Company\Project\stepOnAMine\node_modules.pnpm\[email protected][email protected]\node_modules\electron-vite\dist\chunks\lib-ddb42891.js:123:26)
at createServer (D:\MyFile\Working-Company\Project\stepOnAMine\node_modules.pnpm\[email protected][email protected]\node_modules\electron-vite\dist\chunks\lib-b694cd80.js:75:21)
at async CAC. (D:\MyFile\Working-Company\Project\stepOnAMine\node_modules.pnpm\[email protected][email protected]\node_modules\electron-vite\dist\cli.js:47:9)
ELIFECYCLE Command failed with exit code 1.
----------------------------------------------# my package.json#-------------------------------
{
"name": "steponamine",
"version": "1.0.0",
"description": "An Electron application with Vue and TypeScript",
"main": "./out/main/index.js",
"author": "example.com",
"homepage": "https://www.electronjs.org",
"scripts": {
"format": "prettier --write .",
"lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts,.vue --fix",
"typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
"typecheck:web": "vue-tsc --noEmit -p tsconfig.web.json --composite false",
"typecheck": "npm run typecheck:node && npm run typecheck:web",
"start": "electron-vite preview",
"dev": "electron-vite dev",
"build": "npm run typecheck && electron-vite build",
"postinstall": "electron-builder install-app-deps",
"build:win": "npm run build && electron-builder --win --config",
"build:mac": "npm run build && electron-builder --mac --config",
"build:linux": "npm run build && electron-builder --linux --config"
},
"dependencies": {
"@electron-toolkit/preload": "^1.0.3",
"@electron-toolkit/utils": "^1.0.2"
},
"devDependencies": {
"@electron-toolkit/tsconfig": "^1.0.1",
"@electron/notarize": "^1.2.3",
"@rushstack/eslint-patch": "^1.2.0",
"@types/node": "16.18.11",
"@vitejs/plugin-vue": "^4.0.0",
"@vue/eslint-config-prettier": "^7.0.0",
"@vue/eslint-config-typescript": "^11.0.2",
"electron": "^21.3.3",
"electron-builder": "^23.6.0",
"electron-vite": "^1.0.17",
"eslint": "^8.31.0",
"eslint-plugin-vue": "^9.8.0",
"less": "^4.1.3",
"prettier": "^2.8.2",
"typescript": "^4.9.4",
"vite": "^4.0.4",
"vue": "^3.2.45",
"vue-tsc": "^1.0.22"
}
}
create-electron
pnpm
yarn create @quick-start/electron，选择vue typescript，typescript版本为：4.8.3（4.7.4也试过）
ts文件（如main/index.ts）中随便写一句非法语句，如a = b，执行npm run typecheck，无法检出该错误
是否是tsconfig配置有些问题？我随便拷了一个服务端项目的tsconfig配置执行tsc可以检出错误
create-electron
yarn
yarn create @quick-start/electron，选择vue typescript，在renderer中的vue组件中（如Versions.vue），window.electron 无法识别，在env.d.ts中添加以下声明也无效：
import { ElectronAPI } from '@electron-toolkit/preload'
declare global {
interface Window {
electron: ElectronAPI
api: unknown
}
}
create-electron
yarn
Even though I create the file handler and I registerSchemesAsPrivileged, the video still doesn't play while it starts playing with other templates
protocol.registerSchemesAsPrivileged([
{
scheme: 'app-file',
privileges: {
standard: true,
secure: true,
supportFetchAPI: true,
stream: true
}
}
])
// inside app.whenReady()
protocol.handle('app-file', (request) => {
// it never reaches this part
console.log(request.url, 'HERE', request)
return net.fetch(`file:///${decodeURI(request.url.slice('app-file://'.length))}`)
})
// inside render
<video
preload="auto"
src="app-file:///users/gregor/Documents/movies/dji_1.MP4"
/>
create-electron
npm
vite 版本已经到4.x 了
目前创建项目的命令 npm create @quick-start/electron my-app -- --template vue
创建后的项目 vite 版本是 3.2.4
create-electron
升级版本
No response
No response
While developing native addon that is also a part of the electron application, node-gyp rebuild will remove all build resources inside /build directory, which is causing build process to fail because build\notarize.js module was missing.
Most of the time, /build directory is a directory associated with build-time temporary files, it is better to choose another name for the buildResources directory.
create-electron
pnpm
after npm run dev
I got:
*** stack smashing detected ***: terminated
GPU process exited unexpectedly: exit_code=134
create-electron
npm
使用的是react-ts项目，项目正常运行没问题。但在windows平台打包后运行exe，应用白屏，无任何渲染进程的展示。
create-electron
yarn
Hi, I'm looking to integrate nuxt with electron. I'm coming from the Quasar project. Quasar uses electron-vite.
I started with nuxt-electron plugin, but it disables a bunch of security features in electron.
This is the most secure config I could get to get the example started.
win = new BrowserWindow({
webPreferences: {
preload,
// nodeIntegrationInWorker: true,
contextIsolation: false,
nodeIntegration: true,
// webSecurity: false,
},
});
I'm coming from Quasar, which appears to use electron-vite. The most secure config I can get is:
mainWindow = new BrowserWindow({
icon: path.resolve(__dirname, 'icons/icon.png'), // tray icon
width: 1000,
height: 600,
useContentSize: true,
webPreferences: {
contextIsolation: true,
// More info: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script
preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD),
},
});
So why not use electron-vite directly? The most secure config I can get seems to be with the sandbox turned off:
const mainWindow = new BrowserWindow({
width: 900,
height: 670,
show: false,
autoHideMenuBar: true,
...(process.platform === 'linux' ? { icon } : {}),
webPreferences: {
preload: join(__dirname, '../preload/index.js'),
sandbox: false
}
})
If I enable the sandbox content doesn't show in the vue-typescript version. This seems to be the default for quickstart and electron-vite-boilerplate
What is Quasar doing with electron-vite to allow enabling the sandbox? Quasar appears to install electron-vite here and only needs to turn off sandbox to use @electron/remote
I don't see @electron/remote in the quick-start, why is sandbox: false needed?
Thank you!
create-electron
Use IPC in the examples.
No response
No response
This is using React in renderer.
I want to use a child.html like index.html child.html would have a different mount point for what I call ChildApp.jsx.
How to get this working with the './out/ ?
My child.html is sitting in the same place as my index ./src/renderer but Vite doesn't seem to crawl and find the child.html
create-electron
when I tried 'npm create @quick-start/electron' for starting new project, electron-vite version still 1.0.27.
How can I install electron-vite 2.0.0?
installed packages as follows.
"dependencies": {
"@electron-toolkit/preload": "^2.0.0",
"@electron-toolkit/utils": "^2.0.0",
"electron-updater": "^6.1.1"
},
"devDependencies": {
"@electron-toolkit/eslint-config-prettier": "^1.0.1",
"@electron-toolkit/eslint-config-ts": "^1.0.0",
"@electron-toolkit/tsconfig": "^1.0.1",
"@types/node": "^18.17.5",
"@types/react": "^18.2.20",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.0.4",
"electron": "^25.6.0",
"electron-builder": "^24.6.3",
"electron-vite": "^1.0.27",
"eslint": "^8.47.0",
"eslint-plugin-react": "^7.33.2",
"prettier": "^3.0.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"typescript": "^5.1.6",
"vite": "^4.4.9"
create-electron
npm
按照文档进行配置，在主进程打印值为 undefined.
create-electron
yarn
Hi,
I am wondering why the api type is set as 'unknown' vs electron being ElectronAPI?
import { ElectronAPI } from '@electron-toolkit/preload'
declare global {
interface Window {
electron: ElectronAPI
api: unknown
}
}
Thank you
create-electron
n/a
No response
No response
package.json
{
"type": "module",
"main": "out/main/index.js"
}npm start
> [email protected] start
> electron-vite dev --watch
vite v3.2.5 building for development...
watching for file changes...
build started...
✓ 18 modules transformed.
out/main/index.js 181.97 KiB
built in 330ms.
build the electron main process successfully
-----
vite v3.2.5 building for development...
watching for file changes...
build started...
✓ 5 modules transformed.
out/preload/index.js 2.53 KiB
built in 13ms.
build the electron preload files successfully
-----
dev server running for the electron renderer process at:
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
start electron app...
App threw an error during load
Error [ERR_REQUIRE_ESM]: require() of ES Module /project/out/main/index.js from /project/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js not supported.
index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /project/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
at c._load (node:electron/js2c/asar_bundle:5:13339)
at loadApplicationPackage (/project/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:121:16)
at Object.<anonymous> (/project/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:233:9)
at c._load (node:electron/js2c/asar_bundle:5:13339)
at Object.<anonymous> (node:electron/js2c/browser_init:189:3102)
at ./lib/browser/init.ts (node:electron/js2c/browser_init:189:3306)
at __webpack_require__ (node:electron/js2c/browser_init:1:128)
at node:electron/js2c/browser_init:1:1200
at node:electron/js2c/browser_init:1:1267
at c._load (node:electron/js2c/asar_bundle:5:13339)
I would like to use esm and not commonjs.
Removing the type: module from package.json solves the issue but causes other things to fail, and I'd like to keep type: module as is.
create-electron
npm
After creating a new project via npm create @quick-start/electron electron-test -- --template react-ts, I see errors on many imports in various .ts and .tsx files, as well as with the extends property in the tsconfig files. Adding "allowSyntheticDefaultImports": true, to both tsconfig.node.json and tsconfig.web.json seems to resolve the issue, but if that is the correct configuration then I would expect it to be part of the default template.
create-electron
npm
I've just discovered vite, not very familiar yet, but when I compare the vanilla js sample with all other samples (incl. Vanilla ts), it seems to be missing vite configs.
Is this intended or a "bug" (i.e. vite really not enabled in the vanilla js template)?
create-electron
npm
I use electron-vite/solid/js for my current project i dont use eslint or prettier can you add a clean build with just electron + vite + solid ?
or create a blog post on how to build clean bulid electron-vite and solid ?
create-electron
create a blog post on how to build clean bulid electron-vite and solid ?
add a clean build
No response
After editing and saving in VS Code, autofocus on the Electron window only appears in solid-ts template and Mac screen mirror on iPad.
The vue-ts template is fine.
create-electron
pnpm
Following the quickstart guide https://evite.netlify.app/guide/#scaffolding-your-first-electron-vite-project I've executed:
npm create @quick-start/electronAnd chose Vue as the renderer option.
After performing
npm installin the project created by the template, that's the output:
path> npm install
npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
npm WARN deprecated [email protected]: Please use @electron/asar moving forward. There is no API change, just a package name change
npm WARN deprecated [email protected]: Please use @electron/osx-sign moving forward. Be aware the API is slightly different
> [email protected] postinstall
> electron-builder install-app-deps
• electron-builder version=23.6.0
• loaded configuration file=path\electron-vite--vue-test\electron-builder.yml
added 471 packages, and audited 472 packages in 59s
63 packages are looking for funding
run `npm fund` for details
9 vulnerabilities (3 moderate, 6 high)
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.So there are 9 vulnerabilities and 3 outdated packages.
Could these be updated in the template so that it creates a project with no vulnerabilities?
I know that everything constantly updates, but it would be also cool to have an up-to-date template that can be relied upon.
create-electron
npm
Scaffold：npm create @quick-start/electron
In debug mode, it is worked that icon was setted to the BrowserWindow 's property.
After released, it is not worked.
It's not allowed to add picture to the window, like Electron's Tray.(it was required a parameter as the icon path).
create-electron
npm
I'm having a hard time getting the renderer process (React app) listening to a main thread event. The project was created using the react-ts template.
I have an event being triggered from the main thread (every 10 seconds, for testing purposes):
updater.autoUpdater.on('update-downloaded', (info) => {
console.log('AutoUpdater::update-downloaded')
mainWindow?.webContents.send('update-downloaded', info)
setTimeout(() => updater.autoUpdater.checkForUpdatesAndNotify(), 1000 * delayBeforeNextCheck)
})and trying to subscribe to it from the App component:
import Versions from './components/Versions'
import electronLogo from './assets/electron.svg'
import { useEffect } from 'react'
function App(): JSX.Element {
const ipcHandle = (): void => window.electron.ipcRenderer.send('ping')
const updateApp = (): void => window.electron.ipcRenderer.send('update')
const updateAvailable: string | null = null
useEffect(() => {
const callback = (...args: unknown[]): void => {
console.log('args', args)
// Set updateAvailable
}
const removeListener = window.electron.ipcRenderer.on('update-downloaded', callback)
return () => {
removeListener()
}
}, [])
return (
<div>{updateAvailable}</div>
)
}
export default AppThe event ls never fired in the React component.
create-electron
A simple example or replying to the "ping" by sending back "pong" to the renderer instead of just console logging it.
I don't have a solution for the moment as I can't get it to work.
No response
No response
Following are the contents of log file while using yarn to install dependencies for a project scaffolded with create-electron however the issue does not exist when using npm
# This file contains the result of Yarn building a package (newswire@workspace:.)
# Script name: postinstall
• electron-builder version=24.9.1
• loaded configuration file=C:\Users\x\newswire\electron-builder.yml
• installing production dependencies platform=win32 arch=x64 appDir=C:\Users\x\newswire
⨯ C:\Users\x\AppData\Local\Temp\xfs-edbacdc9\yarn process failed ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
Exit code:
1
Output:
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed in 0s 324ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 744ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0007: │ electron@npm:28.2.0 must be built because it never has been before or the last one failed
➤ YN0007: │ esbuild@npm:0.19.12 must be built because it never has been before or the last one failed
➤ YN0007: │ newswire@workspace:. must be built because it never has been before or the last one failed
➤ YN0009: │ newswire@workspace:. couldn't be built successfully (exit code 1, logs can be found here: C:\Users\x\AppData\Local\Temp\xfs-17ab0574\build.log)
➤ YN0000: └ Completed in 11m 33s
➤ YN0000: Failed with errors in 11m 34s
failedTask=installAppDeps stackTrace=Error: C:\Users\x\AppData\Local\Temp\xfs-edbacdc9\yarn process failed ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
Exit code:
1
Output:
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed in 0s 324ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 744ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0007: │ electron@npm:28.2.0 must be built because it never has been before or the last one failed
➤ YN0007: │ esbuild@npm:0.19.12 must be built because it never has been before or the last one failed
➤ YN0007: │ newswire@workspace:. must be built because it never has been before or the last one failed
➤ YN0009: │ newswire@workspace:. couldn't be built successfully (exit code 1, logs can be found here: C:\Users\x\AppData\Local\Temp\xfs-17ab0574\build.log)
➤ YN0000: └ Completed in 11m 33s
➤ YN0000: Failed with errors in 11m 34s
at ChildProcess.<anonymous> (C:\Users\x\Desktop\desktopApps\newswire\.yarn\cache\builder-util-npm-24.8.1-fc3e50de3b-20555ebd25.zip\node_modules\builder-util\src\util.ts:251:14)
at Object.onceWrapper (node:events:629:26)
at ChildProcess.emit (node:events:514:28)
at ChildProcess.cp.emit (C:\Users\x\Desktop\desktopApps\newswire\.yarn\cache\cross-spawn-npm-7.0.3-e4ff3e65b3-671cc7c728.zip\node_modules\cross-spawn\lib\enoent.js:34:29)
at maybeClose (node:internal/child_process:1091:16)
at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)
create-electron
yarn
I have a multiple windows app. I'm finding for the second renderer process, any changes I make in the code requires me to run npm run build first. Something I'm doing wrong ? Generally with the first renderer, it may have required me to restart (npm run dev) but not specifically use npm run build before.
/* ELECTRON VITE CONFIG */
import { resolve } from 'path';
import { defineConfig, externalizeDepsPlugin } from 'electron-vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
main: {
plugins: [externalizeDepsPlugin()]
},
preload: {
plugins: [externalizeDepsPlugin()],
build: {
rollupOptions: {
input: {
index: resolve(__dirname, 'src/preload/index.js'),
child: resolve(__dirname, 'src/preload/child.js')
}
}
}
},
renderer: {
resolve: {
alias: {
'@renderer': resolve('src/renderer/src')
}
},
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'src/renderer/index.html'),
child: resolve(__dirname, 'src/renderer/child.html')
}
}
},
plugins: [react()]
}
});```
/* RELEVANT PACKAGE.JSON */
scripts": {
"format": "prettier --write .",
"lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
"start": "electron-vite preview",
"dev": "electron-vite dev --watch",
"build": "electron-vite build",
"postinstall": "electron-builder install-app-deps",
"build:win": "npm run build && electron-builder --win --config",
"build:mac": "npm run build && electron-builder --mac --config",
"build:linux": "npm run build && electron-builder --linux --config"
},```
create-electron
npm
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.