{"id":17970508,"url":"https://github.com/bonevidy/vite-electron","last_synced_at":"2025-04-03T21:44:02.470Z","repository":{"id":89185539,"uuid":"490753059","full_name":"boneVidy/vite-electron","owner":"boneVidy","description":null,"archived":false,"fork":false,"pushed_at":"2022-05-10T15:21:45.000Z","size":13572,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-09T09:43:20.948Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/boneVidy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-10T15:18:22.000Z","updated_at":"2023-03-10T08:00:23.000Z","dependencies_parsed_at":"2023-03-12T07:30:55.301Z","dependency_job_id":null,"html_url":"https://github.com/boneVidy/vite-electron","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boneVidy%2Fvite-electron","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boneVidy%2Fvite-electron/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boneVidy%2Fvite-electron/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boneVidy%2Fvite-electron/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/boneVidy","download_url":"https://codeload.github.com/boneVidy/vite-electron/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247085993,"owners_count":20881158,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-29T15:05:58.856Z","updated_at":"2025-04-03T21:44:02.450Z","avatar_url":"https://github.com/boneVidy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vite-react-electron\n\n![GitHub stars](https://img.shields.io/github/stars/caoxiemeihao/vite-react-electron?color=fa6470\u0026style=flat)\n![GitHub issues](https://img.shields.io/github/issues/caoxiemeihao/vite-react-electron?color=d8b22d\u0026style=flat)\n![GitHub license](https://img.shields.io/github/license/caoxiemeihao/vite-react-electron?style=flat)\n[![Required Node.JS \u003e= v14.17.0](https://img.shields.io/static/v1?label=node\u0026message=%3E=14.17.0\u0026logo=node.js\u0026color=3f893e\u0026style=flat)](https://nodejs.org/about/releases)\n\n**English | [简体中文](README.zh-CN.md)**\n\n## Overview\n\nThis is a `Vite`-integrated `Electron` template built with simplification in mind.\n\nThe repo contains only the most basic files, dependencies and functionalities to ensure flexibility for various scenarios. \n\nYou need a basic understanding of `Electron` and `Vite` to get started. But that's not mandatory - you can learn almost all the details by reading through the source code. Trust me, this repo is not that complex. 😋\n\n## Quick start\n\n```sh\nnpm create electron-vite\n```\n\n![electron-vite-react.gif](https://github.com/electron-vite/electron-vite-react/blob/main/packages/renderer/public/electron-vite-react.gif?raw=true)\n\n## Debug\n\n![electron-vite-react-debug.gif](https://github.com/electron-vite/electron-vite-react/blob/main/packages/renderer/public/electron-vite-react-debug.gif?raw=true)\n\n\u003c!--\n```sh\n# clone the project\ngit clone https://github.com/caoxiemeihao/vite-react-electron.git\n\n# open the project directory\ncd vite-react-electron\n\n# install dependencies\nnpm install\n\n# start the application\nnpm run dev\n\n# make a production build\nnpm run build\n```\n--\u003e\n\n## Directory structure\n\nOnce `dev` or `build` npm-script is executed, the `dist` folder will be generated. It has the same structure as the `packages` folder, the purpose of this design is to ensure the correct path calculation.\n\n```tree\n├── build                     Resources for the production build\n|   ├── icon.icns             Icon for the application on macOS\n|   ├── icon.ico              Icon for the application\n|   ├── installerIcon.ico     Icon for the application installer\n|   └── uninstallerIcon.ico   Icon for the application uninstaller\n|\n├── dist                      Generated after build according to the \"packages\" directory\n|   ├── main\n|   ├── preload\n|   └── renderer\n|\n├── release                   Generated after production build, contains executables\n|   └──{version}\n|       ├── win-unpacked      Contains unpacked application executable\n|       └── Setup.exe         Installer for the application\n|\n├── scripts\n|   ├── build.mjs             Develop script -\u003e npm run build\n|   └── watch.mjs             Develop script -\u003e npm run dev\n|\n├── packages\n|   ├── main                  Main-process source code\n|   |   └── vite.config.ts\n|   ├── preload               Preload-script source code\n|   |   └── vite.config.ts\n|   └── renderer              Renderer-process source code\n|       └── vite.config.ts\n```\n\n## Use Electron and NodeJS API\n\n\u003e 🚧 By default, Electron doesn't support the use of API related to Electron and NodeJS in the Renderer process, but someone might need to use it. If so, you can see the template 👉 **[electron-vite-boilerplate](https://github.com/caoxiemeihao/electron-vite-boilerplate)**\n\n#### Invoke Electron and NodeJS API in `Preload-script`\n\n- **packages/preload/index.ts**\n\n    ```typescript\n    import fs from \"fs\"\n    import { contextBridge, ipcRenderer } from \"electron\"\n\n    // --------- Expose some API to Renderer-process. ---------\n    contextBridge.exposeInMainWorld(\"fs\", fs)\n    contextBridge.exposeInMainWorld(\"ipcRenderer\", ipcRenderer)\n    ```\n\n- **packages/renderer/src/global.d.ts**\n\n    ```typescript\n    // Defined in the window\n    interface Window {\n      fs: typeof import(\"fs\")\n      ipcRenderer: import(\"electron\").IpcRenderer\n    }\n    ```\n\n- **packages/renderer/src/main.ts**\n\n    ```typescript\n    // Use Electron and NodeJS API in the Renderer-process\n    console.log(\"fs\", window.fs)\n    console.log(\"ipcRenderer\", window.ipcRenderer)\n    ```\n\n## Use SerialPort, SQLite3, or other node-native addons in the Main-process\n\n- First, you need to make sure that the dependencies in the `package.json` are NOT in the \"devDependencies\". Because the project will need them after packaged.\n\n- Main-process, Preload-script are also built with Vite, and they're built as [build.lib](https://vitejs.dev/config/#build-lib).  \n    So they just need to configure Rollup.\n\n**Click to see more** 👉 [packages/main/vite.config.ts](https://github.com/caoxiemeihao/vite-react-electron/blob/main/packages/main/vite.config.ts)\n\n```js\nexport default {\n  build: {\n    // built lib for Main-process, Preload-script\n    lib: {\n      entry: \"index.ts\",\n      formats: [\"cjs\"],\n      fileName: () =\u003e \"[name].js\",\n    },\n    rollupOptions: {\n      // configuration here\n      external: [\"serialport\", \"sqlite3\"],\n    },\n  },\n}\n```\n\n## `dependencies` vs `devDependencies`\n\n- First, you need to know if your dependencies are needed after the application is packaged.\n\n- Like [serialport](https://www.npmjs.com/package/serialport), [sqlite3](https://www.npmjs.com/package/sqlite3) they are node-native modules and should be placed in `dependencies`. In addition, Vite will not build them, but treat them as external modules.\n\n- Dependencies like [Vue](https://www.npmjs.com/package/vue) and [React](https://www.npmjs.com/package/react), which are pure javascript modules that can be built with Vite, can be placed in `devDependencies`. This reduces the size of the application.\n\n\u003c!--\n## Result\n\n\u003cimg width=\"400px\" src=\"https://raw.githubusercontent.com/caoxiemeihao/blog/main/vite-react-electron/react-win.png\" /\u003e\n--\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbonevidy%2Fvite-electron","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbonevidy%2Fvite-electron","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbonevidy%2Fvite-electron/lists"}