Initial commit

2025-02-20 20:41:04 +01:00 · 2022-10-06 15:52:01 -07:00 · 2022-10-06 15:52:01 -07:00 · 95c52d8a11
commit 95c52d8a11
37 changed files with 1025 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+release
+.vscode/.debug.env
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+dist-electron
--- a/.vscode/.debug.script.mjs
+++ b/.vscode/.debug.script.mjs
@ -0,0 +1,24 @@
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { createRequire } from 'module'
+import { spawn } from 'child_process'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const require = createRequire(import.meta.url)
+const pkg = require('../package.json')
+
+// write .debug.env
+const envContent = Object.entries(pkg.debug.env).map(([key, val]) => `${key}=${val}`)
+fs.writeFileSync(path.join(__dirname, '.debug.env'), envContent.join('\n'))
+
+// bootstrap
+spawn(
+  // TODO: terminate `npm run dev` when Debug exits.
+  process.platform === 'win32' ? 'npm.cmd' : 'npm',
+  ['run', 'dev'],
+  {
+    stdio: 'inherit',
+    env: Object.assign(process.env, { VSCODE_DEBUG: 'true' }),
+  },
+)
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,10 @@
+{
+  // See http://go.microsoft.com/fwlink/?LinkId=827846
+  // for the documentation about the extensions.json format
+  "recommendations": [
+    "editorconfig.editorconfig",
+    "mrmlnc.vscode-json5",
+    "rbbit.typescript-hero",
+    "syler.sass-indented",
+  ]
+}
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -0,0 +1,47 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "compounds": [
+    {
+      "name": "Debug App",
+      "preLaunchTask": "start .debug.script.mjs",
+      "configurations": [
+        "Debug Main Process",
+        "Debug Renderer Process"
+      ],
+      "presentation": {
+        "hidden": false,
+        "group": "",
+        "order": 1
+      },
+      "stopAll": true
+    }
+  ],
+  "configurations": [
+    {
+      "name": "Debug Main Process",
+      "type": "pwa-node",
+      "request": "launch",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
+      "windows": {
+        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
+      },
+      "runtimeArgs": [
+        "--no-sandbox",
+        "--remote-debugging-port=9229",
+        "."
+      ],
+      "envFile": "${workspaceFolder}/.vscode/.debug.env",
+      "console": "integratedTerminal"
+    },
+    {
+      "name": "Debug Renderer Process",
+      "port": 9229,
+      "request": "attach",
+      "type": "pwa-chrome",
+      "timeout": 60000
+    },
+  ]
+}
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@ -0,0 +1,34 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558 
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "start .debug.script.mjs",
+      "type": "shell",
+      "command": "node .vscode/.debug.script.mjs",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "fileLocation": "relative",
+        "pattern": {
+          // TODO: correct "regexp"
+          "regexp": "^([a-zA-Z]\\:\/?([\\w\\-]\/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
+          "file": 1,
+          "line": 3,
+          "column": 4,
+          "code": 5,
+          "message": 6
+        },
+        "background": {
+          "activeOnStart": true,
+          "endsPattern": "^.*[startup] Electron App.*$",
+        }
+      }
+    }
+  ]
+}
+
+// https://code.visualstudio.com/docs/editor/tasks#_operating-system-specific-properties
+// https://code.visualstudio.com/docs/editor/tasks#_background-watching-tasks
+// https://code.visualstudio.com/docs/editor/tasks#_can-a-background-task-be-used-as-a-prelaunchtask-in-launchjson
--- a/21
+++ b/21
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 草鞋没号
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@ -0,0 +1,77 @@
+# electron-vite-react
+
+[![awesome-vite](https://awesome.re/mentioned-badge.svg)](https://github.com/vitejs/awesome-vite)
+![GitHub stars](https://img.shields.io/github/stars/caoxiemeihao/vite-react-electron?color=fa6470)
+![GitHub issues](https://img.shields.io/github/issues/caoxiemeihao/vite-react-electron?color=d8b22d)
+![GitHub license](https://img.shields.io/github/license/caoxiemeihao/vite-react-electron)
+[![Required Node.JS >= 14.18.0 || >=16.0.0](https://img.shields.io/static/v1?label=node&message=14.18.0%20||%20%3E=16.0.0&logo=node.js&color=3f893e)](https://nodejs.org/about/releases)
+
+English | [简体中文](README.zh-CN.md)
+
+## 👀 Overview
+
+📦 Ready out of the box  
+🎯 Based on the official [template-react-ts](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts), project structure will be familiar to you  
+🌱 Easily extendable and customizable  
+💪 Supports Node.js API in the renderer process  
+🔩 Supports C/C++ native addons  
+🐞 Debugger configuration included  
+🖥 Easy to implement multiple windows  
+
+## 🛫 Quick start
+
+```sh
+npm create electron-vite
+```
+
+![electron-vite-react.gif](https://github.com/electron-vite/electron-vite-react/blob/main/public/electron-vite-react.gif?raw=true)
+
+## 🐞 Debug
+
+![electron-vite-react-debug.gif](https://github.com/electron-vite/electron-vite-react/blob/main/public/electron-vite-react-debug.gif?raw=true)
+
+## 📂 Directory structure
+
+Familiar React application structure, just with `electron` folder on the top :wink:  
+*Files in this folder will be separated from your React application and built into `dist/electron`*  
+
+```tree
+├── electron                  Electron-related code
+│   ├── main                  Main-process source code
+│   ├── preload               Preload-scripts source code
+│   └── resources             Resources for the production build
+│       ├── icon.icns             Icon for the application on macOS
+│       ├── icon.ico              Icon for the application
+│       ├── installerIcon.ico     Icon for the application installer
+│       ├── uninstallerIcon.ico   Icon for the application uninstaller
+|       └── iconset               
+|           └── 256x256.png       Icon for the application on Linux
+│
+├── release                   Generated after production build, contains executables
+│   └── {version}
+│       ├── {os}-unpacked     Contains unpacked application executable
+│       └── Setup.{ext}       Installer for the application
+│
+├── public                    Static assets
+└── src                       Renderer source code, your React application
+```
+
+## 🚨 Be aware
+
+This template integrates Node.js API to the renderer process by default. If you want to follow **Electron Security Concerns** you might want to disable this feature. You will have to expose needed API by yourself.  
+
+To get started, remove the option as shown below. This will [modify the Vite configuration and disable this feature](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#config-presets-opinionated).
+
+```diff
+# vite.config.ts
+
+electron({
+- renderer: {}
+})
+```
+
+## ❔ FAQ
+
+- [dependencies vs devDependencies](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#dependencies-vs-devdependencies)
+- [Using C/C++ native addons in renderer](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#load-nodejs-cc-native-modules)
+- [Node.js ESM packages](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#nodejs-esm-packages) (e.g. `execa` `node-fetch`)
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@ -0,0 +1,72 @@
+# vite-react-electron
+
+[![awesome-vite](https://awesome.re/mentioned-badge.svg)](https://github.com/vitejs/awesome-vite)
+![GitHub stars](https://img.shields.io/github/stars/caoxiemeihao/vite-react-electron?color=fa6470)
+![GitHub issues](https://img.shields.io/github/issues/caoxiemeihao/vite-react-electron?color=d8b22d)
+![GitHub license](https://img.shields.io/github/license/caoxiemeihao/vite-react-electron)
+[![Required Node.JS >= 14.18.0 || >=16.0.0](https://img.shields.io/static/v1?label=node&message=14.18.0%20||%20%3E=16.0.0&logo=node.js&color=3f893e)](https://nodejs.org/about/releases)
+
+[English](README.md) | 简体中文
+
+## 概述
+
+📦 开箱即用  
+🎯 基于官方的 [template-react-ts](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts), 低侵入性  
+🌱 结构清晰，可塑性强  
+💪 支持在渲染进程中使用 Electron、Node.js API  
+🔩 支持 C/C++ 模块  
+🖥 很容易实现多窗口  
+
+## 快速开始
+
+```sh
+npm create electron-vite
+```
+
+![electron-vite-react.gif](https://github.com/electron-vite/electron-vite-react/blob/main/public/electron-vite-react.gif?raw=true)
+
+## 调试
+
+![electron-vite-react-debug.gif](https://github.com/electron-vite/electron-vite-react/blob/main/public/electron-vite-react-debug.gif?raw=true)
+
+## 目录
+
+*🚨 默认情况下, `electron` 文件夹下的文件将会被构建到 `dist/electron`*
+
+```tree
+├── electron                  Electron 源码文件夹
+│   ├── main                  Main-process 源码
+│   ├── preload               Preload-scripts 源码
+│   └── resources             应用打包的资源文件夹
+│       ├── icon.icns             应用图标(macOS)
+│       ├── icon.ico              应用图标
+│       ├── installerIcon.ico     安装图标
+│       └── uninstallerIcon.ico   卸载图标
+│
+├── release                   构建后生成程序目录
+│   └── {version}
+│       ├── {os}-unpacked     未打包的程序(绿色运行版)
+│       └── Setup.{ext}       应用安装文件
+│
+├── public                    同 Vite 模板的 public
+└── src                       渲染进程源码、React代码
+```
+
+
+## 🚨 这需要留神
+
+默认情况下，该模板在渲染进程中集成了 Node.js，如果你不需要它，你只需要删除下面的选项. [因为它会修改 Vite 默认的配置](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#config-presets-opinionated).
+
+```diff
+# vite.config.ts
+
+electron({
+- renderer: {}
+})
+```
+
+## FAQ
+
+- [dependencies vs devDependencies](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#dependencies-vs-devdependencies)
+- [Using C/C++ native addons in Electron-Renderer](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#load-nodejs-cc-native-modules)
+- [Node.js ESM packages](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#nodejs-esm-packages) (e.g. `execa` `node-fetch`)
--- a/electron-builder.json
+++ b/electron-builder.json
@ -0,0 +1,59 @@
+{
+  "appId": "TEST",
+  "productName": "TEST",
+  "copyright": "Copyright © 2022 ${author}",
+  "directories": {
+    "app": "release/app",
+    "output": "release/build",
+    "buildResources": "electron/resources"
+  },
+  "extends": null,
+  "asar": true,
+  "asarUnpack": ["**\\*.{node,dll}", "prisma"],
+  "files": [
+    "dist",
+    "node_modules",
+    "package.json",
+    "prisma/**/*",
+    "resources/**/*",
+    "!**/node_modules/@prisma/engines/introspection-engine*",
+    "!**/node_modules/@prisma/engines/migration-engine*",
+    "!**/node_modules/@prisma/engines/prisma-fmt*",
+    "!**/node_modules/@prisma/engines/query_engine-*",
+    "!**/node_modules/@prisma/engines/libquery_engine*",
+    "!**/node_modules/prisma/query_engine*",
+    "!**/node_modules/prisma/libquery_engine*",
+    "!**/node_modules/prisma/**/*.mjs"
+  ],
+  "win": {
+    "target": [
+      {
+        "target": "nsis",
+        "arch": ["x64"]
+      }
+    ],
+    "artifactName": "${productName}-Windows-${version}-Setup.${ext}"
+  },
+  "nsis": {
+    "oneClick": false,
+    "perMachine": false,
+    "allowToChangeInstallationDirectory": true,
+    "deleteAppDataOnUninstall": false
+  },
+  "mac": {
+    "target": ["dmg"],
+    "artifactName": "${productName}-Mac-${version}-Installer.${ext}"
+  },
+  "linux": {
+    "icon": "electron/resources/iconset",
+    "target": ["AppImage", "deb"],
+    "artifactName": "${productName}-Linux-${version}.${ext}"
+  },
+  "extraResources": [
+    "./assets/**",
+    "prisma/**/*",
+    "node_modules/@prisma/engines/migration-engine*",
+    "node_modules/@prisma/engines/query*",
+    "node_modules/@prisma/engines/libquery*"
+  ]
+}
--- a/electron/electron-env.d.ts
+++ b/electron/electron-env.d.ts
@ -0,0 +1,11 @@
+/// <reference types="vite-electron-plugin/electron-env" />
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    VSCODE_DEBUG?: 'true'
+    DIST_ELECTRON: string
+    DIST: string
+    /** /dist/ or /public/ */
+    PUBLIC: string
+  }
+}
--- a/electron/main/index.ts
+++ b/electron/main/index.ts
@ -0,0 +1,106 @@
+// The built directory structure
+//
+// ├─┬ dist-electron
+// │ ├─┬ main
+// │ │ └── index.js    > Electron-Main
+// │ └─┬ preload
+// │   └── index.js    > Preload-Scripts
+// ├─┬ dist
+// │ └── index.html    > Electron-Renderer
+//
+process.env.DIST_ELECTRON = join(__dirname, "..");
+process.env.DIST = join(process.env.DIST_ELECTRON, "../dist");
+process.env.PUBLIC = app.isPackaged
+  ? process.env.DIST
+  : join(process.env.DIST_ELECTRON, "../public");
+
+import { app, BrowserWindow, shell, ipcMain } from "electron";
+import { release } from "os";
+import { join } from "path";
+
+// Disable GPU Acceleration for Windows 7
+if (release().startsWith("6.1")) app.disableHardwareAcceleration();
+
+// Set application name for Windows 10+ notifications
+if (process.platform === "win32") app.setAppUserModelId(app.getName());
+
+if (!app.requestSingleInstanceLock()) {
+  app.quit();
+  process.exit(0);
+}
+
+let win: BrowserWindow | null = null;
+// Here, you can also use other preload
+const preload = join(__dirname, "../preload/index.js");
+const url = process.env.VITE_DEV_SERVER_URL;
+const indexHtml = join(process.env.DIST, "index.html");
+
+async function createWindow() {
+  win = new BrowserWindow({
+    title: "Main window",
+    icon: join(process.env.PUBLIC, "favicon.svg"),
+    webPreferences: {
+      preload,
+      nodeIntegration: false,
+      contextIsolation: true,
+    },
+  });
+
+  if (app.isPackaged) {
+    win.loadFile(indexHtml);
+  } else {
+    win.loadURL(url);
+    // win.webContents.openDevTools()
+  }
+
+  // Test actively push message to the Electron-Renderer
+  win.webContents.on("did-finish-load", () => {
+    win?.webContents.send("main-process-message", new Date().toLocaleString());
+  });
+
+  // Make all links open with the browser, not with the application
+  win.webContents.setWindowOpenHandler(({ url }) => {
+    if (url.startsWith("https:")) shell.openExternal(url);
+    return { action: "deny" };
+  });
+}
+
+app.whenReady().then(createWindow);
+
+app.on("window-all-closed", () => {
+  win = null;
+  if (process.platform !== "darwin") app.quit();
+});
+
+app.on("second-instance", () => {
+  if (win) {
+    // Focus on the main window if the user tried to open another
+    if (win.isMinimized()) win.restore();
+    win.focus();
+  }
+});
+
+app.on("activate", () => {
+  const allWindows = BrowserWindow.getAllWindows();
+  if (allWindows.length) {
+    allWindows[0].focus();
+  } else {
+    createWindow();
+  }
+});
+
+// new window example arg: new windows url
+ipcMain.handle("open-win", (event, arg) => {
+  const childWindow = new BrowserWindow({
+    webPreferences: {
+      preload,
+    },
+  });
+
+  if (app.isPackaged) {
+    childWindow.loadFile(indexHtml, { hash: arg });
+  } else {
+    childWindow.loadURL(`${url}/#${arg}`);
+    // childWindow.webContents.openDevTools({ mode: "undocked", activate: true })
+  }
+});
--- a/electron/preload/index.ts
+++ b/electron/preload/index.ts
@ -0,0 +1,99 @@
+import { contextBridge } from "electron"
+
+function domReady(condition: DocumentReadyState[] = ['complete', 'interactive']) {
+  return new Promise(resolve => {
+    if (condition.includes(document.readyState)) {
+      resolve(true)
+    } else {
+      document.addEventListener('readystatechange', () => {
+        if (condition.includes(document.readyState)) {
+          resolve(true)
+        }
+      })
+    }
+  })
+}
+
+const safeDOM = {
+  append(parent: HTMLElement, child: HTMLElement) {
+    if (!Array.from(parent.children).find(e => e === child)) {
+      return parent.appendChild(child)
+    }
+  },
+  remove(parent: HTMLElement, child: HTMLElement) {
+    if (Array.from(parent.children).find(e => e === child)) {
+      return parent.removeChild(child)
+    }
+  },
+}
+
+/**
+ * https://tobiasahlin.com/spinkit
+ * https://connoratherton.com/loaders
+ * https://projects.lukehaas.me/css-loaders
+ * https://matejkustec.github.io/SpinThatShit
+ */
+function useLoading() {
+  const className = `loaders-css__square-spin`
+  const styleContent = `
+@keyframes square-spin {
+  25% { transform: perspective(100px) rotateX(180deg) rotateY(0); }
+  50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
+  75% { transform: perspective(100px) rotateX(0) rotateY(180deg); }
+  100% { transform: perspective(100px) rotateX(0) rotateY(0); }
+}
+.${className} > div {
+  animation-fill-mode: both;
+  width: 50px;
+  height: 50px;
+  background: #fff;
+  animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
+}
+.app-loading-wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #282c34;
+  z-index: 9;
+}
+    `
+  const oStyle = document.createElement('style')
+  const oDiv = document.createElement('div')
+
+  oStyle.id = 'app-loading-style'
+  oStyle.innerHTML = styleContent
+  oDiv.className = 'app-loading-wrap'
+  oDiv.innerHTML = `<div class="${className}"><div></div></div>`
+
+  return {
+    appendLoading() {
+      safeDOM.append(document.head, oStyle)
+      safeDOM.append(document.body, oDiv)
+    },
+    removeLoading() {
+      safeDOM.remove(document.head, oStyle)
+      safeDOM.remove(document.body, oDiv)
+    },
+  }
+}
+
+// ----------------------------------------------------------------------
+
+const { appendLoading, removeLoading } = useLoading()
+domReady().then(appendLoading)
+
+window.onmessage = ev => {
+  ev.data.payload === 'removeLoading' && removeLoading()
+}
+
+setTimeout(removeLoading, 4999)
+
+
+contextBridge.exposeInMainWorld('electron', {
+  doThing: () => console.log('hello'),
+});
--- a/electron/resources/icon.icns
+++ b/electron/resources/icon.icns
--- a/electron/resources/icon.ico
+++ b/electron/resources/icon.ico
--- a/electron/resources/iconset/256x256.png
+++ b/electron/resources/iconset/256x256.png
--- a/electron/resources/installerIcon.ico
+++ b/electron/resources/installerIcon.ico
--- a/electron/resources/uninstallerIcon.ico
+++ b/electron/resources/uninstallerIcon.ico
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,85 @@
+{
+  "name": "temp_name",
+  "productName": "temp_name",
+  "private": true,
+  "version": "2.0.0",
+  "description": "",
+  "author": "jeffvli",
+  "license": "GPL-3.0",
+  "main": "dist-electron/main/index.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build && electron-builder",
+    "postinstall": "node post-install.js && electron-builder install-app-deps",
+    "prisma:init": "npx prisma migrate dev",
+    "prisma:migrate": ""
+  },
+  "engines": {
+    "node": "^14.18.0 || >=16.0.0"
+  },
+  "dependencies": {
+    "@prisma/client": "^4.4.0",
+    "node-mpv": "^2.0.0-beta.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "@vitejs/plugin-react": "^2.1.0",
+    "electron": "^21.1.0",
+    "electron-builder": "^23.3.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.55.0",
+    "typescript": "^4.8.4",
+    "vite": "^3.1.4",
+    "vite-electron-plugin": "^0.4.4",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@mantine/carousel": "^5.5.4",
+    "@mantine/core": "^5.5.4",
+    "@mantine/dates": "^5.5.4",
+    "@mantine/form": "^5.5.4",
+    "@mantine/hooks": "^5.5.4",
+    "@mantine/modals": "^5.5.4",
+    "@mantine/notifications": "^5.5.4",
+    "@mantine/spotlight": "^5.5.4",
+    "@tanstack/react-query": "^4.10.1",
+    "@typescript-eslint/eslint-plugin": "^5.39.0",
+    "@typescript-eslint/parser": "^5.39.0",
+    "ag-grid-community": "^28.2.0",
+    "ag-grid-react": "^28.2.0",
+    "axios": "^1.0.0",
+    "dayjs": "^1.11.5",
+    "electron-is-dev": "^2.0.0",
+    "electron-rebuild": "^3.2.9",
+    "embla-carousel-react": "^7.0.3",
+    "eslint": "^8.24.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^3.5.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-promise": "^6.0.1",
+    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-sort-keys-fix": "^1.1.2",
+    "eslint-plugin-typescript-sort-keys": "^2.1.0",
+    "immer": "^9.0.15",
+    "nanoid": "^4.0.0",
+    "prettier": "^2.7.1",
+    "prisma": "^4.4.0",
+    "react-virtualized-auto-sizer": "^1.0.7",
+    "react-window": "^1.8.7",
+    "react-window-infinite-loader": "^1.0.8",
+    "replace-in-file": "^6.3.5",
+    "ts-node": "^10.9.1",
+    "vite-plugin-electron": "^0.9.2",
+    "vite-plugin-electron-renderer": "^0.9.3",
+    "zustand": "^4.1.1"
+  },
+  "debug": {
+    "env": {
+      "VITE_DEV_SERVER_URL": "http://127.0.0.1:7777"
+    }
+  }
+}
--- a/post-install.js
+++ b/post-install.js
@ -0,0 +1,14 @@
+const path = require('path');
+const replace = require('replace-in-file');
+
+// fix long prisma loading times caused by scanning from process.cwd(), which returns "/" when run in electron
+// (thus it scans all files on the computer.) See https://github.com/prisma/prisma/issues/8484
+// solution: we get the app path from main process via sync IPC
+const options = {
+  files: path.join(__dirname, '../release/app/node_modules/', '@prisma', 'client', 'index.js'),
+  from: 'findSync(process.cwd()',
+  to: `findSync(require("electron").ipcRenderer.sendSync('config:get-app-path')`,
+};
+
+const results = replace.sync(options);
+console.log('build script: prisma fix', results);
--- a/public/electron-vite-react-debug.gif
+++ b/public/electron-vite-react-debug.gif
--- a/public/electron-vite-react.gif
+++ b/public/electron-vite-react.gif
--- a/public/electron.png
+++ b/public/electron.png
--- a/public/favicon.svg
+++ b/public/favicon.svg
@ -0,0 +1,15 @@
+<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
+<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#BD34FE"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEA83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+</defs>
+</svg>
--- a/public/node.png
+++ b/public/node.png
--- a/public/react.svg
+++ b/public/react.svg
@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
+    <g fill="#61DAFB">
+        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
+        <circle cx="420.9" cy="296.5" r="45.7"/>
+        <path d="M520.5 78.1z"/>
+    </g>
+</svg>
--- a/public/vite.svg
+++ b/public/vite.svg
@ -0,0 +1,15 @@
+<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
+<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#BD34FE"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEA83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,73 @@
+import { useState } from "react";
+import electron from "/electron.png";
+import react from "/react.svg";
+import vite from "/vite.svg";
+import styles from "styles/app.module.scss";
+
+const App: React.FC = () => {
+  const [count, setCount] = useState(0);
+
+  window.electron.doThing();
+
+  return (
+    <div className={styles.app}>
+      <header className={styles.appHeader}>
+        <div className={styles.logos}>
+          <div className={styles.imgBox}>
+            <img
+              src={electron}
+              style={{ height: "24vw" }}
+              className={styles.appLogo}
+              alt="electron"
+            />
+          </div>
+          <div className={styles.imgBox}>
+            <img src={vite} style={{ height: "19vw" }} alt="vite" />
+          </div>
+          <div className={styles.imgBox}>
+            <img
+              src={react}
+              style={{ maxWidth: "100%" }}
+              className={styles.appLogo}
+              alt="logo"
+            />
+          </div>
+        </div>
+        <p>Hello Electron + Vite + React!</p>
+        <p>
+          <button onClick={() => setCount((count) => count + 1)}>
+            count is: {count}
+          </button>
+        </p>
+        <p>
+          Edit <code>App.tsx</code> and save to test HMR updates.
+        </p>
+        <div>
+          <a
+            className={styles.appLink}
+            href="https://reactjs.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn React
+          </a>
+          {" | "}
+          <a
+            className={styles.appLink}
+            href="https://vitejs.dev/guide/features.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Vite Docs
+          </a>
+          <div className={styles.staticPublic}>
+            Place static files into the <code>/public</code> folder
+            <img style={{ width: 77 }} src="./node.png" />
+          </div>
+        </div>
+      </header>
+    </div>
+  );
+};
+
+export default App;
--- a/src/assets/styles/app.module.scss
+++ b/src/assets/styles/app.module.scss
@ -0,0 +1,65 @@
+.app {
+  text-align: center;
+
+  .appHeader {
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
+
+    .logos {
+      display: flex;
+      box-sizing: border-box;
+      align-items: center;
+      padding: 0 5vw;
+      width: 100%;
+
+      .imgBox {
+        width: 33.33%;
+
+        .appLogo {
+          pointer-events: none;
+        }
+
+        @media (prefers-reduced-motion: no-preference) {
+          .appLogo {
+            animation: App-logo-spin infinite 20s linear;
+          }
+          @keyframes App-logo-spin {
+            from {
+              transform: rotate(0deg);
+            }
+            to {
+              transform: rotate(360deg);
+            }
+          }
+        }
+      }
+    }
+
+    button {
+      font-size: calc(10px + 2vmin);
+    }
+
+    .appLink {
+      color: #61dafb;
+    }
+
+    .staticPublic {
+      display: flex;
+      align-items: center;
+
+      code {
+        padding: 4px 7px;
+        margin: 0 4px;
+        border-radius: 4px;
+        background-color: rgb(30, 30, 30, .7);
+        font-size: 13px;
+      }
+    }
+  }
+}
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@ -0,0 +1,21 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import 'styles/index.css'
+
+/**
+ * If you enables use of Node.js API in the Renderer-process
+ * ```
+ * npm i -D vite-plugin-electron-renderer
+ * ```
+ * @see - https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#electron-renderervite-serve
+ */
+// import './samples/node-api'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
+
+postMessage({ payload: 'removeLoading' }, '*')
--- a/src/samples/node-api.ts
+++ b/src/samples/node-api.ts
@ -0,0 +1,13 @@
+import { lstat } from 'fs/promises'
+import { cwd } from 'process'
+import { ipcRenderer } from 'electron'
+
+ipcRenderer.on('main-process-message', (_event, ...args) => {
+  console.log('[Receive Main-process message]:', ...args)
+})
+
+lstat(cwd()).then(stats => {
+  console.log('[fs.lstat]', stats)
+}).catch(err => {
+  console.error(err)
+})
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+		"baseUrl": ".",
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+		"paths": {
+			"@/*": ["src/*"],
+      "styles/*": ["src/assets/styles/*"]
+		},
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
+
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["package.json", "electron"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,51 @@
+import { rmSync } from 'fs'
+import path from 'path'
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import electron from 'vite-electron-plugin'
+import { customStart } from 'vite-electron-plugin/plugin'
+import pkg from './package.json'
+
+rmSync(path.join(__dirname, 'dist-electron'), { recursive: true, force: true })
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': path.join(__dirname, 'src'),
+      'styles': path.join(__dirname, 'src/assets/styles'),
+    },
+  },
+  plugins: [
+    react(),
+    electron({
+      include: [
+        'electron',
+        'preload',
+      ],
+      transformOptions: {
+        sourcemap: !!process.env.VSCODE_DEBUG,
+      },
+      // Will start Electron via VSCode Debug
+      plugins: process.env.VSCODE_DEBUG
+        ? [customStart(debounce(() => console.log(/* For `.vscode/.debug.script.mjs` */'[startup] Electron App')))]
+        : undefined,
+    }),
+  ],
+  server: process.env.VSCODE_DEBUG ? (() => {
+    const url = new URL(pkg.debug.env.VITE_DEV_SERVER_URL)
+    return {
+      host: url.hostname,
+      port: +url.port,
+    }
+  })() : undefined,
+  clearScreen: false,
+})
+
+function debounce<Fn extends (...args: any[]) => void>(fn: Fn, delay = 299) {
+  let t: NodeJS.Timeout
+  return ((...args) => {
+    clearTimeout(t)
+    t = setTimeout(() => fn(...args), delay)
+  }) as Fn
+}