ElectronEgg

English

简体中文

English

简体中文

Appearance

Framework Architecture ​

v5 Version ​

Single business process + modular + multi-task, suitable for small/medium/large projects. Supports js/ts, CJS modules, ESM modules, hot reload, balancing development efficiency and long-term maintenance.

Processes ​

The framework has three types of processes:

  • ee main process: business logic
  • ee renderer process: software UI
  • ee task process: time-consuming business operations

Communication ​

  • IPC: frontend ⇋ business layer (bidirectional)
  • HTTP: frontend, CLI, browser ⇋ business layer (unidirectional)
  • Socket: frontend ⇋ business layer (bidirectional)

Local Storage ​

  • SQLite database

Core Packages ​

ee-bin provides CLI tools for development environment use.

ee-core provides framework core functionality.

ee-go (optional) provides go language support.

Functional Divisions ​

Software UI ​

frontend directory, for developing software UI; supports any frontend technology such as vue, react, angular, html, vite, etc.

Business Logic ​

electron directory, for developing business logic; standard business logic, calling OS APIs, accessing remote server APIs, etc.

go directory (optional), for developing business logic; leveraging Go's cross-platform and high-performance capabilities to significantly improve software experience.

Developer Mode ​

Choose Development Language ​

v5 supports js, CJS modules, ESM modules, providing two development languages. It is recommended to first try the demo project to familiarize yourself with the framework's basic features.

  1. Download the project
bash
# gitee
git clone https://gitee.com/dromara/electron-egg.git

# github
git clone https://github.com/dromara/electron-egg.git
  1. (Optional) On the main branch or checkout the demo branch
bash
# ts version
git checkout -b demo remotes/origin/demo-ts
# js version
git checkout -b demo remotes/origin/demo-js

Install Dependencies ​

bash
# Root directory, install electron dependencies
npm i
# Build sqlite (if not needed, delete ./service/database file and import code in the demo)
npm run re-sqlite

# Enter the frontend directory and install frontend dependencies
cd frontend 
npm i

Detailed instructions: SQLite Installation

Start ​

In development mode, the renderer process loads the frontend service; in production mode, it loads the ./public/dist/ code.

The main process, whether in development or production mode, loads the built js code from ./public/electron/.

Method 1 ​

Start frontend & main process simultaneously, with configurable main process hot reload.

  • Suitable for rapid testing in later development stages. Frontend and main process hot reload work independently, reducing startup time.

Configure package.json

javascript
  "scripts": {
    // Start simultaneously
    "dev": "ee-bin dev",
    // Build frontend/main process, and encrypt
    "build": "npm run build-frontend && npm run build-electron && ee-bin encrypt",
    // Staging environment, test before packaging
    "start": "ee-bin start",
    // Start separately
    "dev-frontend": "ee-bin dev --serve=frontend",
    "dev-electron": "ee-bin dev --serve=electron",
  }
bash
npm run dev

TIP

Note 1: If the started frontend service is not http://localhost:8080/, please first configure the frontend object in the cmd/bin.js file.

Note 2: If the packaged app shows a blank screen, check the base path, verify that resources have been moved, and confirm the router uses hash mode.

Method 2 ​

Start the frontend service and main process electron service separately; main process hot reload can be disabled.

  • Suitable for early development stages, avoiding frequent restarts caused by large file changes.
bash
# Open two terminals
npm run dev-frontend

npm run dev-electron

Debugging ​

See: debug

Build ​

Build consists of frontend build, main process build, code encryption, go/python language build, and packaging executable programs.

  • Commands can be freely combined to match your development habits.

Configure package.json

javascript
  "scripts": {
    // Build frontend/main process, and encrypt
    "build": "npm run build-frontend && npm run build-electron && ee-bin encrypt",
    // Build frontend
    "build-frontend": "ee-bin build --cmds=frontend && ee-bin move --flag=frontend_dist",
    // Build main process
    "build-electron": "ee-bin build --cmds=electron",
    // Encrypt
    "encrypt": "ee-bin encrypt",
    // Build go
    "build-go-w": "ee-bin move --flag=go_static,go_config,go_package && ee-bin build --cmds=go_w",
    "build-go-m": "ee-bin move --flag=go_static,go_config,go_package,go_images && ee-bin build --cmds=go_m",
    "build-go-l": "ee-bin move --flag=go_static,go_config,go_package,go_images && ee-bin build --cmds=go_l",
    // Build python
    "build-python": "ee-bin build --cmds=python && ee-bin move --flag=python_dist",
    // Generate executable program
    "build-w": "ee-bin build --cmds=win64",
    "build-we": "ee-bin build --cmds=win_e",
    "build-m": "ee-bin build --cmds=mac",
    "build-m-arm64": "ee-bin build --cmds=mac_arm64",
    "build-l": "ee-bin build --cmds=linux",
  }

Demo ​

The framework integrates many feature demo examples for developers to quickly get started. See demo documentation

Build Software ​

See tutorial: Build Executable Program