{"id":13406269,"url":"https://github.com/cawa-93/vite-electron-builder","last_synced_at":"2025-05-14T01:11:45.412Z","repository":{"id":36963255,"uuid":"314510510","full_name":"cawa-93/vite-electron-builder","owner":"cawa-93","description":"Secure boilerplate for Electron app based on Vite. TypeScript + Vue/React/Angular/Svelte/Vanilla","archived":false,"fork":false,"pushed_at":"2025-05-05T15:27:13.000Z","size":6581,"stargazers_count":2673,"open_issues_count":4,"forks_count":272,"subscribers_count":23,"default_branch":"main","last_synced_at":"2025-05-05T16:46:09.229Z","etag":null,"topics":["best-practices","boilerplate","electron","electron-builder","javascript","preact","react","solid","svelte","template","typescipt","vite","vite-electron","vue"],"latest_commit_sha":null,"homepage":"","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/cawa-93.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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,"zenodo":null},"funding":{"buy_me_a_coffee":"kozack","custom":"https://send.monobank.ua/6SmojkkR9i"}},"created_at":"2020-11-20T09:46:27.000Z","updated_at":"2025-05-05T15:27:15.000Z","dependencies_parsed_at":"2023-11-13T23:40:55.711Z","dependency_job_id":"d4f29e32-54d5-4f4c-8a16-dea4accd91ce","html_url":"https://github.com/cawa-93/vite-electron-builder","commit_stats":{"total_commits":2308,"total_committers":25,"mean_commits":92.32,"dds":0.5606585788561524,"last_synced_commit":"5271ed941375406cd7bcccdad60aa42171dfb6c5"},"previous_names":[],"tags_count":256,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawa-93%2Fvite-electron-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawa-93%2Fvite-electron-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawa-93%2Fvite-electron-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawa-93%2Fvite-electron-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cawa-93","download_url":"https://codeload.github.com/cawa-93/vite-electron-builder/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254049516,"owners_count":22006078,"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":["best-practices","boilerplate","electron","electron-builder","javascript","preact","react","solid","svelte","template","typescipt","vite","vite-electron","vue"],"created_at":"2024-07-30T19:02:25.812Z","updated_at":"2025-05-14T01:11:45.403Z","avatar_url":"https://github.com/cawa-93.png","language":"TypeScript","funding_links":["https://buymeacoffee.com/kozack","https://send.monobank.ua/6SmojkkR9i","https://www.buymeacoffee.com/kozack/)!"],"categories":["TypeScript","Boilerplates","\u003e 1K ⭐️","Uncategorized","boilerplate","Javascript"],"sub_categories":["Tools","Samples","Uncategorized"],"readme":"\n\u003e [!Important]\n\u003e This project is maintained by developer from Ukraine 🇺🇦\n\u003e \n\u003e I do my best, but due to Russia's ongoing full-scale invasion of Ukraine, I barely have the energy to support open source projects.\n\u003e\n\u003e If my work has been useful to you, please consider [supporting Ukraine](https://stand-with-ukraine.pp.ua/) or [me personally](https://send.monobank.ua/6SmojkkR9i). Even your **$1** has an impact!\n\n![IMG_0875](https://github.com/user-attachments/assets/590de304-e2c4-4935-9814-c18ade52fd8e)\n\n\n# Vite Electron Builder Boilerplate\n\n![GitHub last commit](https://img.shields.io/github/last-commit/cawa-93/vite-electron-builder?label=last%20update)\n![GitHub package.json dev/peer/optional dependency version](https://img.shields.io/github/package-json/dependency-version/cawa-93/vite-electron-builder/dev/electron) \n![GitHub package.json dev/peer/optional dependency version](https://img.shields.io/github/package-json/dependency-version/cawa-93/vite-electron-builder/dev/electron-builder)\n![GitHub package.json dev/peer/optional dependency version](https://img.shields.io/github/package-json/dependency-version/cawa-93/vite-electron-builder/dev/vite?filename=packages%2Fmain%2Fpackage.json)\n![GitHub package.json dev/peer/optional dependency version](https://img.shields.io/github/package-json/dependency-version/cawa-93/vite-electron-builder/dev/playwright)\n\nThis is a template for secure electron applications. Written following the latest safety requirements, recommendations\nand best practices.\n\n## Get started\n\nFollow these steps to get started with the template:\n\n1. Click the **[Use this template](https://github.com/cawa-93/vite-electron-builder/generate)** button (you must be logged in) or just clone this repo.\n2. Go to project folder and run `npm run init`.\n3. Start application in development mode by `npm start`.\n4. Compile executable by `npm run compile`.\n \nThat's all you need. 😉\n\n\u003e [!TIP]\n\u003e You can explore the demo application for various frameworks and operating systems in the [Deployment](https://github.com/cawa-93/vite-electron-builder/deployments) section.\n\u003e This will allow you to see how the application performs across different environments.\n\u003e Additionally, you can verify the auto-update functionality by installing an outdated version of the application.\n\n❤️ **If you like this template, give a ⭐ or [send support](https://www.buymeacoffee.com/kozack/)!**\n\n## Features\n\n### Lightweight\nWhen designing this template, I tried to keep it minimal, using the platform's native features to the maximum and minimizing the number of third-party dependencies.\n\n### Electron\n\n- This template uses the latest electron version with all the latest security patches.\n- The architecture of the application is built according to the security [guides](https://www.electronjs.org/docs/tutorial/security) and best practices.\n- The latest version of the [electron-builder] is used to package the application.\n\n### Automatic tests\n\n- End-to-end are placed in the root [`tests`](tests) directory and use [playwright].\n- You may write any unit tests inside each package and use whatever you ~~want~~ need.\n\n### Continuous Integration\n\n- The configured workflow will check the types for each push and PR.\n- Code signing supported. See [code-signing documentation](https://www.electron.build/code-signing.html).\n\n### Auto-update\n\nEach time you push changes to the `main` branch,\nthe [`ci`](.github/workflows/ci.yml) workflow starts to create and deploy a new application version with then will be downloaded and applied by each app instance.\n\n## Project Structure\n\nThe project is designed as monorepo where each part of the application is an independent package.\nEach package could have own tech stack, tests, dependencies, frameworks, etc.\nAll internal names are prefixed by `@app/*`.\nThere are no technical reasons for this.\nIt's just for you to make it easier to understand the architecture.\n\nInitially, the repository contains only a few packages.4\n\n### Packages with building tools:\n\n- [`packages/integrate-renderer`](packages/integrate-renderer) - A helper package that is not included in the runtime.\n  It is used in `npm run init` to configure a new interface package.\n- [`packages/electron-versions`](packages/electron-versions) - A set of helper functions to get the versions of internal components bundled within Electron.\n\n### Packages with app logic:\n\n- [`packages/main`](packages/main) - Implementation of Electron's [**main script**](https://www.electronjs.org/docs/tutorial/quick-start#create-the-main-script-file).\n- [`packages/preload`](packages/preload) - Implementation of Electron's [**preload scripts**](https://www.electronjs.org/docs/latest/tutorial/tutorial-preload).\n\n### Renderer is not included\n\nAs you may have noticed, the repository does **not** contain a package that implements the application interface.\nThe reason is that since the entire application is a mono-repository,\nyou can use any web application based on any framework or bundler as a package for the interface.\n\nThere is only one requirement: the template expects to import renderer by `@app/renderer` name.\n\n\u003e [!TIP]\n\u003e You can create new renderer package in interactive mode by `npm run init`.\n\n\u003e [!NOTE]\n\u003e If you are using a bundler other than vite,\n\u003e you may need to slightly change the [dev-mode.js](packages/dev-mode.js) script to run it correctly.\n\n## How It works\n\n### Compile executable\n\nWhen an application is ready to distribute, you need to compile it into executable.\nWe are using [electron-builder] for\nthis.\n\n- You can compile application locally by `npm run compile`.\n  In this case, you will get executable that you cat share, but it will not support auto-updates out-of-box.\n- To have auto-updater, you should compile an application and publish it to one or more supported sources for distribution. In this case, all application instances will download and apply all new updates. This is done by GitHub action in [release.yml](.github/workflows/release.yml).\n\n\u003e [!TIP]\n\u003e This template is configured to use GitHub Releases to distribute updates, but you can configure whatever you need.\n\u003e Find more in [electron-builder docs](https://www.electron.build/configuration/publish).\n\n\n### Working with third-party dependencies\n\nBecause the `renderer` works and builds like a _regular web application_, you can only use dependencies that support the\nbrowser or compile to a browser-friendly format.\n\nThis means that in the `renderer` you are free to use any frontend dependencies such as Vue, React, lodash, axios and so\non. However, you _CANNOT_ use any native Node.js APIs, such as, `systeminformation`. These APIs are _only_ available in\na Node.js runtime environment and will cause your application to crash if used in the `renderer` layer. Instead, if you\nneed access to Node.js runtime APIs in your frontend, export a function form the `preload` package.\n\nAll dependencies that require Node.js api can be used in\nthe [`preload` script](https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts).\n\n#### Expose in the main world\n\nHere is an example. Let's say you need to read some data from the file system or database in the renderer.\n\nIn the preload context, create a function that reads and returns data. To make the function announced in the preload\navailable in the render, you usually need to call\nthe [`electron.contextBridge.exposeInMainWorld`](https://www.electronjs.org/ru/docs/latest/api/context-bridge).\n\nHowever, this template is designed to use all power of ES modules.\nYou can import anything from `preload` in `renderer`.\nAll the data will quietly throw through the `electron.contextBridge.exposeInMainWorld()`,\nso you don't need to worry about it.\n\n```ts\n// preload/src/index.ts\nimport {readFile} from 'node:fs/promises';\n\n// Encapsulate types if you use typescript\ninterface UserData {\n  prop: string\n}\n\n// Will call `electron.contextBridge.exposeInMainWorld('getUserData', getUserData)`\nexport function getUserData(): Promise\u003cUserData\u003e {\n  return readFile('/path/to/file/in/user/filesystem.json', {encoding: 'utf8'}).then(JSON.parse);\n}\n```\n\nNow you can import and call the method in renderer\n\n```ts\n// renderer/src/anywere/component.ts\nimport {getUserData} from '@app/preload'\n\n// Method will came from exposed context\n// const userData = globalThis['getUserData']\nconst userData = await getUserData()\n```\n\n\u003e [!TIP]\n\u003e Find more\n\u003e in [Context Isolation tutorial](https://www.electronjs.org/docs/tutorial/context-isolation#security-considerations).\n\n### Working with Electron API\n\nAlthough the preload has access to all of Node.js API, it **still runs in the BrowserWindow context**, so only limited\nelectron modules are available in it.\n\n\u003e [!TIP]\n\u003e Check the [electron docs](https://www.electronjs.org/ru/docs/latest/api/clipboard) for the full list of available\n\u003e methods.\n\nAll other electron methods can be invoked in the `main`.\n\nAs a result, the architecture of interaction between all modules is as follows:\n\n```mermaid\nsequenceDiagram\nrenderer-\u003e\u003e+preload: Read data from file system\npreload-\u003e\u003e-renderer: Data\nrenderer-\u003e\u003epreload: Maximize window\nactivate preload\npreload--\u003e\u003emain: Invoke IPC command\nactivate main\nmain--\u003e\u003epreload: IPC response\ndeactivate main\npreload-\u003e\u003erenderer: Window maximized\ndeactivate preload\n```\n\n\u003e [!TIP]\n\u003e Find more in [Inter-Process Communication tutorial](https://www.electronjs.org/docs/latest/tutorial/ipc).\n\n### Modes and Environment Variables\n\nAll environment variables are set as part of the `import.meta`, so you can access them vie the following\nway: `import.meta.env`.\n\n\u003e [!NOTE]\n\u003e If you are using TypeScript and want to get code completion,\n\u003e you must add all the environment variables to the [`ImportMetaEnv` in `types/env.d.ts`](types/env.d.ts).\n\nThe mode option is used to specify the value of `import.meta.env.MODE` and the corresponding environment variables files\nthat need to be loaded.\n\nBy default, there are two modes:\n\n- `production` is used by default\n- `development` is used by `npm start` script\n\nWhen running the build script, the environment variables are loaded from the following files in your project root:\n\n```\n.env                # loaded in all cases\n.env.local          # loaded in all cases, ignored by git\n.env.[mode]         # only loaded in specified env mode\n.env.[mode].local   # only loaded in specified env mode, ignored by git\n```\n\n\u003e [!WARNING]\n\u003e To prevent accidentally leaking env variables to the client, only variables prefixed with `VITE_` are exposed to your\n\u003e Vite-processed code.\n\nFor example, let's take the following `.env` file:\n\n```\nDB_PASSWORD=foobar\nVITE_SOME_KEY=123\n```\n\nOnly `VITE_SOME_KEY` will be exposed as `import.meta.env.VITE_SOME_KEY` to your client source code, but `DB_PASSWORD`\nwill not.\n\n\u003e [!TIP]\n\u003e You can change that prefix or add another. See [`envPrefix`](https://vitejs.dev/config/shared-options.html#envprefix).\n\n### NPM Scripts\n\n```sh\nnpm start\n```\nStart application in development more with hot-reload.\n\n---\n```sh\nnpm run build\n```\nRuns the `build` command in all workspaces if present.\n\n---\n```sh\nnpm run compile\n```\nFirst runs the `build` script,\nthen compiles the project into executable using `electron-builder` with the specified configuration.\n\n---\n```sh\nnpm run compile -- --dir -c.asar=false\n```\nSame as `npm run compile` but pass to `electron-builder` additional parameters to disable asar archive and installer\ncreating.\nUseful for debugging compiled application.\n\n---\n```sh\nnpm run test\n```\nExecutes end-to-end tests on **compiled app** using Playwright.\n\n---\n```sh\nnpm run typecheck\n```\nRuns the `typecheck` command in all workspaces if present.\n\n---\n```sh\nnpm run create-renderer\n```\nInitializes a new Vite project named `renderer`. Basically same as `npm create vite`.\n\n---\n```sh\nnpm run integrate-renderer\n```\nStarts the integration process of the renderer using the Vite Electron builder.\n\n---\n```sh\nnpm run init\n```\nSet up the initial environment by creating a new renderer, integrating it, and installing the necessary packages.\n\n## Contribution\n\nSee [Contributing Guide](CONTRIBUTING.md).\n\n\n[vite]: https://github.com/vitejs/vite/\n\n[electron]: https://github.com/electron/electron\n\n[electron-builder]: https://github.com/electron-userland/electron-builder\n\n[playwright]: https://playwright.dev\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawa-93%2Fvite-electron-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcawa-93%2Fvite-electron-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawa-93%2Fvite-electron-builder/lists"}