Code Monkey home page Code Monkey logo

electron-vite-boilerplate's Introduction

electron-app

An Electron application with Vue3 and TypeScript

electron-version electron-vite-version electron-builder-version vite-version vue-version typescript-version

Features

  • 💡 Optimize asset handling
  • 🚀 Fast HMR for renderer processes
  • 🔥 Hot reloading for main process and preload scripts
  • 🔌 Easy to debug
  • 🔒 Compile to v8 bytecode to protect source code

Getting Started

Read documentation for more details.

You can also use the create-electron tool to scaffold your project for other frameworks (e.g. React, Svelte or Solid).

Recommended IDE Setup

Project Setup

Install

$ npm install

Development

$ npm run dev

Build

# For windows
$ npm run build:win

# For macOS
$ npm run build:mac

# For Linux
$ npm run build:linux

Examples

electron-vite-boilerplate's People

Contributors

alex8088 avatar amaoc avatar area73 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  avatar  avatar

electron-vite-boilerplate's Issues

ipcRenderer and ipcMain examples

I looked a bit but didn't see any examples of how to use messaging between process in a svelte application.

Can you give some hints?

when I try import { ipcRenderer } from "electron"; in a TS render process file I get the error:

browser-external:path:9 Module "path" has been externalized for browser compatibility. Cannot access "path.join" in client code. get @ browser-external:path:9 index.js:4 Uncaught ReferenceError: __dirname is not defined at node_modules/electron/index.js (index.js:4:28) at __require2 (chunk-7FP5O474.js?v=b49c6588:10:50) at index.js:21:34

tsconfig.node.json include all files in src/main

Shouldnt the tsconfig.node.json include all files in src/main and src/preload instead of only the root ones?

So instead of:

"include": ["electron.vite.config.*", "src/main/*", "src/preload/*"],

use this:

"include": ["electron.vite.config.*", "src/main/**/*", "src/preload/**/*"],

Vue framework is in devDependencies

Hi, can you explain why application frameworks like vue or electron are listed in devDependencies instead of dependencies? That seem a bit unexpected.

Thanks

Vue router + electron vite

Hello Alex,
First of all, thank you for the work you have done. your repo is the best for the electron part with vite and vuejs.

But just a question when I configure the Router vuejs and I build it does not work knowing that by doing a yarn dev it works very well.

it works with yarn start and yarn dev but it doesn't work after build (linux).
I don't get any error but anything related to router-view or router link doesn't work

do you have an idea ? thank you

记一次打包之后,找不到 node_modules/../src/index.js 文件

在新增了 mqtt 的包之后,开发过程中一切顺利,打包之后,直接报错:‘找不到 node_modules/debug/src/index.js 文件’

解压打包之后的 app.asar 文件后,查看里面的 node_modules/debug 文件夹,发现里面除了 package.json 和 LICENSE 文件外,都是空的,对比本地的 node_modules/debug 文件,少了 src 文件夹。

瞬间懵了:包打进去了,但是没有源代码?什么情况???第一次碰到这种情况,npm, yarn, pnpm 都用过,还是不行,纠结一天后,发现了问题的原因,定位到了是 electron-builder 的配置问题,一脸尴尬...

node_modules/debug/src 中了 electron-builder.yml 中 files 的 '!**/src/' 配置,被忽略了。虽然知道这个是为了减少包的大小,但是此配置同样也会影响到了 node_modules 里面的文件,把此配置改为 '!src/' 即可。。。

望作者改进。。。

Suggestion for an electron-vite-boilerplate-lit

Hello @alex8088

I was looking for help in creating an Electron app managed by Vite and using Lit components, and I found this repo, which uses Vue components.

I cloned your electron-vite-boilerplate and I ran successfully the resulting Vue app (both dev and build:mac).

I congratulate you for the nice clean project, which runs without any problems.

Since I have more experience with Lit than with Vue, React, Svelte, Solid, e.t.c., I tried (and succeeded) to transform your project into my electron-vite-boilerplate-lit, which I just published on github.

I preserved the project code structure, but I replaced the Vite support and components by the similar Lit support and components.

Now, could you please look at my project and comment on it?
Then, if you find it interesting and useful, would you consider adding a fork or clone of my project to your repo, for better visibility? You would be welcome to modify and improve it, as you would see fit.

I also looked at you collection of templates in your quick-start...create-electron, and I created a couple of test projects (a vanilla and a vue project). These also ran without any problems.

My alternate or additional suggestion would be to add the lit and lit-ts templates to your collection. I am sure that this would be easy to do for you, as you know your workflow for adding and testing these templates.

Please let me know what you think of my suggestions.

Best regards, @rudifa

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.