5.1 KiB

Raw Blame History

vite-react-electron

Overview

Very simple Vite, React, Electron integration template.
Contains only the basic dependencies.
The extension is very flexible.

Installation

# clone the project
git clone git@github.com:caoxiemeihao/vite-react-electron.git

# open the project directory
cd vite-react-electron

# install dependencies
npm install

# start the application
npm run dev

# make a production build
npm run build

Directory structure

Once dev or build npm-script is executed, the dist folder will be generated. It has the same structure as the src folder, the purpose of this design is to ensure the correct path calculation.

├
├── build                     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
├
├── dist                      Generated after build according to the "src" directory
├   ├── main
├   ├── preload
├   ├── renderer
├
├── release                   Generated after production build, contains executables
├   ├── {version}
├       ├── win-unpacked      Contains unpacked application executable
├       ├── Setup.exe         Installer for the application
├
├── scripts
├   ├── build.mjs             Build script, for -> npm run build
├   ├── vite.config.mjs       Marin-process, Preload-script vite-config
├   ├── watch.mjs             Develop script, for -> npm run dev
├
├── src
├   ├── main                  Main-process source code
├   ├── preload               Preload-script source code
├   ├── renderer              Renderer-process source code
├       ├── vite.config.ts    Renderer-process vite-config
├

Use Electron and NodeJS API

🚧 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

Invoke Electron and NodeJS API in `Preload-script`

src/preload/index.ts

import fs from "fs"
import { contextBridge, ipcRenderer } from "electron"

// --------- Expose some API to Renderer-process. ---------
contextBridge.exposeInMainWorld("fs", fs)
contextBridge.exposeInMainWorld("ipcRenderer", ipcRenderer)

src/renderer/src/global.d.ts

// Defined in the window
interface Window {
	fs: typeof import("fs")
	ipcRenderer: import("electron").IpcRenderer
}

src/renderer/src/main.ts

// Use Electron and NodeJS API in the Renderer-process
console.log("fs", window.fs)
console.log("ipcRenderer", window.ipcRenderer)

Use SerialPort, SQLite3, or other node-native addons in the Main-process

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.
Main-process, Preload-script are also built with Vite, and they're built as build.lib.
So they just need to configure Rollup.

Click to see more 👉 scripts/vite.config.mjs

export default {
	build: {
		// built lib for Main-process, Preload-script
		lib: {
			entry: "index.ts",
			formats: ["cjs"],
			fileName: () => "[name].js",
		},
		rollupOptions: {
			// configuration here
			external: ["serialport", "sqlite3"],
		},
	},
}

`dependencies` vs `devDependencies`

First, you need to know if your dependencies are needed after the application is packaged.
Like serialport, 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.
Dependencies like Vue and React, which are pure javascript modules that can be built with Vite, can be placed in devDependencies. This reduces the size of the application.

5.1 KiB Raw Blame History