Mastering Cross‑Platform Desktop Apps with Electron: From Setup to Real‑World Projects

Although browser‑based (B/S) applications dominate today, client‑server (C/S) desktop apps still have strong market demand because browsers sandbox access to local files and system resources, while desktop apps can read/write files and invoke native APIs. Electron, built on Chromium and Node.js, lets developers create cross‑platform desktop applications using HTML, CSS, and JavaScript, and powers popular tools like VS Code and Atom.

Environment Setup

Before creating an Electron app, install the essential tools: Node.js, Vue CLI, and Electron.

Install Node.js

npm config set registry http://registry.npm.taobao.org/

npm install -g cnpm --registry=https://registry.npm.taobao.org

Install/Upgrade Vue CLI

vue -V

npm install @vue/cli -g

Install Electron

npm install -g electron

cnpm install -g electron

Verify the installation:

electron --version

Create and Run a Project

Clone the official Electron quick‑start repository and launch it:

git clone https://github.com/electron/electron-quick-start

cd electron-quick-start

npm install

npm start

The application window will appear as shown below.

Alternatively, you can generate a project with the electron‑vue scaffolding tool: vue init simulatedgreg/electron-vue Follow the prompts to configure the project, then install dependencies and run:

npm install

# Development mode

npm run dev

# Build installer

npm run build

Electron Source Directory Overview

The Electron source tree mirrors Chromium’s multi‑process architecture. Key directories include:

Electron
├── atom               # Core source code
│   ├── app            # System entry point
│   ├── browser        # Main process UI and window management
│   │   ├── lib        # JS for main‑process initialization
│   │   ├── ui         # Platform‑specific UI (cocoa, gtk, win)
│   │   ├── default_app
│   │   └── api        # Main‑process API implementation
│   ├── renderer       # Rendering‑process code
│   │   ├── lib        # JS for renderer initialization
│   │   └── api        # Renderer‑process API implementation
│   └── common          # Shared code between main and renderer
├── chromium_src      # Copied from the Chromium project
├── docs
├── docs-translations
├── spec
├── atom.gyp
└── common.gypi

During development, the most frequently edited directories are src, package.json, and appveyor.yml. Additional important directories include script, tools, vendor, node_modules, out, dist, and external_binaries.

Application Project Layout (electron‑vue Template)

electron‑vue : Template configuration.

build : Build scripts.

config : Basic configuration (e.g., port forwarding).

node_modules : Project dependencies.

src : Source code.

main : Entry files index.js and index.dev.js for the main process.

renderer : Contains assets, components, router, store, App.vue, and main.js.

static : Static assets.

index.html : Single HTML entry page.

package.json : Dependency definitions.

Most development work (≈90%) occurs inside the src folder.

Core Architecture

Electron applications consist of three fundamental modules:

Main Process : Executes the script defined in package.json (e.g., background.js). It creates BrowserWindow instances and manages application lifecycle. Each app has exactly one main process.

Renderer Process : Each window runs its own renderer process using Chromium. It can access Node.js APIs, enabling direct interaction with the operating system.

IPC (Inter‑Process Communication) : The main process creates windows via BrowserWindow. When a window is destroyed, its renderer process terminates. The main process coordinates all windows and their independent renderer processes.

Comprehensive Example: NetEase Cloud Music

The electron‑vue‑cloud‑music project demonstrates a full‑featured cross‑platform desktop music player built with Electron, Vue, and Ant Design Vue. Key features include:

Drag‑and‑drop playback

Desktop lyrics

Mini mode

Custom tray menu

Task‑bar thumbnail controls

Audio visualisation

Auto/manual update checks

Nedb persistence

Custom install path and UI skinning

Browser‑based client launch

CI/CD with Travis CI and AppVeyor

Sharing to QQ space, download management, local song matching, etc.

Running the project:

git clone https://github.com/your-repo/electron-vue-cloud-music

cd electron-vue-cloud-music

npm install

npm run dev

Sample screenshots of the application are shown below.

Example: QQ Music Player

This player is also built with electron‑vue, using Vue, Vuex, Vue‑router, and Element‑UI. To run:

cd electron-vue-music

npm install

# Development mode

npm run dev

# Build installer

npm run build

Screenshot of the running application:

The guide above provides a complete workflow—from environment preparation and tool installation to project scaffolding, source‑code organization, core Electron architecture, and real‑world example applications—enabling developers to build robust cross‑platform desktop software with Electron.