Git Product home page Git Product logo

fast-vite-electron's Introduction

logo

⚡Vite + Electron & Doubleshot Template

This template is used to build vite + electron projects. Build with Doubleshot, crazy fast!

🎉 Doubleshot is a whole new set of tools to help you quickly build and start a node backend or electron main process.

This template is based on a small framework einf that I wrote myself, which may not be complete, if you want to apply to production, you can use the templates with integrated nest.js:

Features

Motivation

In the past, I've been building desktop clients with vue + vue-cli-plugin-electron-builder, and they work very well. But as the project volume grows, webpack-based build patterns become slower and slower.

The advent of vite and esbuild greatly improved the development experience and made me feel lightning fast ⚡.

It took me a little time to extract this template and thank you for using it.

How to use

  • Click the Use this template button (you must be logged in) or just clone this repo.

  • In the project folder:

    # install dependencies
    yarn # npm install
    
    # run in developer mode
    yarn dev # npm run dev
    
    # build
    yarn build # npm run build

Note for PNPM

In order to use with pnpm, you'll need to adjust your .npmrc to use any one the following approaches in order for your dependencies to be bundled correctly (ref: #6389):

node-linker=hoisted
public-hoist-pattern=*
shamefully-hoist=true

Relative

My blog post:

fast-vite-electron's People

Contributors

archergu avatar renovate[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

fast-vite-electron's Issues

[help] how to debug main process

thanks for your great work!

as title, how to debug main process in VSCode or Webstorm?

and if it's possible to support debug render process as well?

fast-vite-electron 集成nestjs无法获取AppService

参考fast-vite-nestjs-electron的代码集成到fast-vite-electron之后无法在AppController中获得appService对象
image
导致报错Error: Cannot read properties of undefined (reading 'getTime')

有什么DEMO可以参考吗?

The "path" argument must be of type string or an instance of URL. Received undefined

I installed clipboardy but when I use it, it cause error like titlte

// main/index.ts
import { app } from 'electron'
import { createEinf } from 'einf'
import clipboardy from 'clipboardy'
import { AppController } from './app.controller'
import { createWindow } from './main.window'

clipboardy.writeSync('abc')

process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 'true'

async function electronAppInit() {
  const isDev = !app.isPackaged
  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.exit()
  })

  if (isDev) {
    if (process.platform === 'win32') {
      process.on('message', (data) => {
        if (data === 'graceful-exit') app.exit()
      })
    } else {
      process.on('SIGTERM', () => {
        app.exit()
      })
    }
  }
}

async function bootstrap() {
  try {
    await electronAppInit()

    await createEinf({
      window: createWindow,
      controllers: [AppController],
      injects: [
        {
          name: 'IS_DEV',
          inject: !app.isPackaged,
        },
      ],
    })
  } catch (error) {
    console.error(error)
    app.quit()
  }
}

bootstrap()
App threw an error during load
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string or an instance of URL. Received undefined
    at new NodeError (node:internal/errors:393:5)
    at fileURLToPath (node:internal/url:1485:11)
    at Object.<anonymous> (D:\fast-vite-electron\dist\main\index.js:2270:85)
    at Module._compile (node:internal/modules/cjs/loader:1174:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1229:10)
    at Module.load (node:internal/modules/cjs/loader:1044:32)
    at Module._load (node:internal/modules/cjs/loader:885:12)
    at f._load (node:electron/js2c/asar_bundle:2:13330)
    at loadApplicationPackage (D:\fast-vite-electron\node_modules\electron\dist\resources\default_app.asar\main.js:121:16)
    at Object.<anonymous> (D:\fast-vite-electron\node_modules\electron\dist\resources\default_app.asar\main.js:233:9)

Note: I added clipboardy to tsupConfig in vite.config.ts

image

So what's the problem here?

require() of ES Module not supported

I install hwid package to get hardware ID. Here is the code:

import getHWID from 'hwid'
export const getHarewareId = async () => {
  const id = await getHWID()

  return id
}

Then I got this error

image

Project doesn't work

If you do a dependency update (pnpm update), the project stops building.

Full log:

VITE v5.2.11  ready in 670 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help
DSB 💻 Mode:  Development
DSB 💠 Application type:  electron
DSB ✅ Prebuild succeeded! (128.23ms)
DSB 🚦 Wait for renderer: http://[::1]:5173
/Users/***/fast-vite-electron/node_modules/wait-on/lib/wait-on.js:131
return throwError(Error(`${TIMEOUT_ERR_MSG}: ${resourcesWaitingFor}`));
^

Error: Timed out waiting for: http-get://[::1]:5173
at /Users/***/fast-vite-electron/node_modules/wait-on/lib/wait-on.js:131:31
at doInnerSub (/Users/***/fast-vite-electron/node_modules/rxjs/dist/cjs/internal/operators/mergeInternals.js:22:31)
at outerNext (/Users/***/fast-vite-electron/node_modules/rxjs/dist/cjs/internal/operators/mergeInternals.js:17:70)
at OperatorSubscriber._this._next (/Users/***/fast-vite-electron/node_modules/rxjs/dist/cjs/internal/operators/OperatorSubscriber.js:33:21)
at Subscriber.next (/Users/***/fast-vite-electron/node_modules/rxjs/dist/cjs/internal/Subscriber.js:51:18)
at AsyncAction.<anonymous> (/Users/***/fast-vite-electron/node_modules/rxjs/dist/cjs/internal/observable/timer.js:28:28)
at AsyncAction._execute (/Users/***/fast-vite-electron/node_modules/rxjs/dist/cjs/internal/scheduler/AsyncAction.js:79:18)
at AsyncAction.execute (/Users/***/fast-vite-electron/node_modules/rxjs/dist/cjs/internal/scheduler/AsyncAction.js:67:26)
at AsyncScheduler.flush (/Users/***/fast-vite-electron/node_modules/rxjs/dist/cjs/internal/scheduler/AsyncScheduler.js:38:33)
at listOnTimeout (node:internal/timers:573:17)

Node.js v20.9.0

如何设置静态资源打包目录

冒昧打扰一下,请问主函数中用到了一些静态资源,如何配置,让他们可用呢?

目前我还在开发环境中,这些文件没有编译到dist中

image

优化electron打包的大小

我们后端是golang 只是把golang的二进制文件给到我们 其实用到nest 只是封装了几个方法 但是electron打包把项目里的生产依赖全部打进了electron的包里 而且里面大部分都是前端的依赖 如何在不分前后端项目的情况下 优化包的大小啊 可以区分两个package.json吗? 然后公用一个viteconfig.ts吗? 而且还要考虑到Jenkins构建web端 辛苦作者给个意见吧

[help] AppController's parameter [0] is not injectable

I use my personal eslint config and auto convert the source code in app.service.ts from

import { AppService } from './app.service'

to

import type { AppService } from './app.service'

import cause error as title.

It cause me a long time to fix, until seeing your eslint config

I'm wondering why can't import type?

dev打开就是全屏?

我看main window.ts 写了
const win = new BrowserWindow({
width: 800,
height: 640,

怎么我打开就是全屏哪里修改一下

TypeError: Error processing argument at index 0, conversion failure from undefined

系统信息

System:
OS: macOS 14.5
CPU: (10) arm64 Apple M1 Pro
Binaries:
Node: 18.20.1 - /opt/homebrew/bin/node
Yarn: 1.22.17 - /opt/homebrew/bin/yarn
npm: 10.5.0 - /opt/homebrew/bin/npm
pnpm: 9.4.0 - /opt/homebrew/bin/pnpm

错误信息

运行 pnpm run dev

> [email protected] dev /Users/***/project/fast-vite-electron
> rimraf dist && vite

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
DSB 💻 Mode:  Development 
DSB 💠 Application type:  electron 

VITE v5.3.2  ready in 277 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help
DSB ✅ Prebuild succeeded! (38.25ms)
DSB ⚡ Run main file: dist/main/index.js
TypeError: Error processing argument at index 0, conversion failure from undefined
 at _.loadURL (node:electron/js2c/browser_init:2:79664)
 at n.loadURL (node:electron/js2c/browser_init:2:13178)
 at createWindow (/Users/***/project/fast-vite-electron/dist/main/index.js:112:7)
 at createEinf (/Users/***//project/fast-vite-electron/node_modules/einf/dist/index.js:125:84)
 at async bootstrap (/Users/***//project/fast-vite-electron/dist/main/index.js:149:5)
DSB Main process exit

问题描述

多次启动项目(run dev)就会有几率复现。定位原因是DS_RENDERER_URL为undefined导致的。
https://github.com/ArcherGu/fast-vite-electron/blob/041ebc8d5aa067694531bfe3279d5ea0b11e115d/src/main/main.window.ts#L20C19-L20C34

Hi from another repo.

前辈您好,冒昧打扰您了,请问您有兴趣到 https://github.com/electron-vite 下一起做点东西吗?我们可以一起交流 vite 在 electron 下的实践,避免重复造轮子。
我们可以把这个组织扩大,人多力量大更容易涨星~
期待您的回复!

项目有问题

不好用想要实现的功能其实没有实现吧,yarn dev 用不了

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions
.github/workflows/ci.yml
  • actions/checkout v4
  • pnpm/action-setup v4.0.0
  • actions/setup-node v4
  • actions/checkout v4
  • pnpm/action-setup v4.0.0
  • actions/setup-node v4
npm
package.json
  • einf ^1.5.3
  • vue ^3.4.31
  • @lightwing/eslint-config 1.0.78
  • @vitejs/plugin-vue 5.1.4
  • @vue/compiler-sfc 3.5.8
  • @vue/test-utils 2.4.6
  • electron 32.1.2
  • electron-builder 25.0.5
  • eslint 9.11.1
  • happy-dom 15.7.4
  • lint-staged 15.2.10
  • playwright 1.47.2
  • rimraf 6.0.1
  • simple-git-hooks 2.11.1
  • tslib 2.7.0
  • typescript 5.6.2
  • vite 5.4.7
  • vite-plugin-doubleshot 0.0.17
  • vitest 2.1.1
  • vue-tsc 2.1.6
  • pnpm 9.11.0

  • Check this box to trigger a request for Renovate to run again on this repository

Adding preload script to mainWindow

I'm trying to add preload script to mainWindow.
image

I know that I have to build it from typescript to js, but I don't know how. Maybe create a custom Vite plugin?

有没有考虑工具化呀

现在的模版模式限制挺多的,要保证同目录结构,结构不一致要么自己看模版代码改要么放弃用不了。可以把核心功能做出vite插件形式,或者一个支持用命令行配置到package.json的script里去的形式。

How to optimize the size of the package

electron-builder packages all node_modules into the installation package, which contains most of the plug-ins and libraries of vue web. How to optimize the size of the package?

Dev script not exiting when I close Electron

It's just a small annoying issue. When I run yarn dev, then Electron window open up, I click close button. The windows is closed but the script is still running. How can I fix this?

Can't correct parse node.js native modules

I use fast-vite-electron, and enable nodeIntegration: true.

When i use chokidar to watch files' change, I found node.js native module, such as fs, path was wrapper as esm, i cause error:

Uncaught TypeError: promisify is not a function
    at node_modules/readdirp/index.js (index.js:9)
    at __require2 (chunk-ZNTI3VZZ.js?v=d533faec:48)
    at node_modules/chokidar/index.js (index.js:7)
    at __require2 (chunk-ZNTI3VZZ.js?v=d533faec:48)
    at dep:chokidar:1

and I debug it, found:
image

all the native node.js modules can't work well

Renderer 中一些更好的方案?

Renderer 使用 NodeJsElectron 可能可以自动化掉
比如 import electron from 'electron' 自动翻译成 const electron = require('electron')
还有 fspathelectron-storesqlite3。。。等等这些内置,或者由 C++ 写成的包
我新开了个模板写了个 plugin 尝试做了这件事儿

Window closes instantly

Window closes instantly. Going to localhost:3000 and looking in the dev tools console there is a possible error:

Screenshot 2022-05-05 at 11 29 06

Steps to reproduce on Mac OS Cataline, node v16.14.2, yarn v1.22.18:

  • yarn
  • yarn dev

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.