Electron Development Guide: Environment Setup, Project Creation, and Directory Structure

Electron is a cross‑platform development framework based on Chromium and Node.js that allows developers to build desktop applications using HTML, CSS, and JavaScript, supporting macOS, Windows, and Linux.

Environment Setup

Before creating an Electron project, install the required tools such as Node, Vue, and Electron.

Install Node from the official website or via Homebrew, and configure the npm registry to the Taobao mirror:

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

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

Check the Vue‑CLI version and upgrade if necessary:

vue -V

npm install @vue/cli -g

Install Electron globally (or via cnpm):

npm install -g electron

cnpm install -g electron

Verify the installation:

electron --version

Creating and Running a Project

Clone the official quick‑start repository and start the application:

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

cd electron-quick-start

npm install

npm start

The project runs a simple window displaying the default UI.

Alternatively, use the electron‑vue template via Vue‑CLI:

vue init simulatedgreg/electron-vue

Follow the prompts to generate the project, then install dependencies and run:

npm install

npm run dev

or

npm run build

Electron Source Code Structure

The main source tree includes directories such as atom (the core source), chromium_src , docs , spec , and build configuration files. Important directories for developers are src , package.json , and appveyor.yml , along with auxiliary folders like script , tools , vendor , node_modules , out , dist , and external_binaries .

Application Directory Layout (electron‑vue)

electron-vue : template configuration

build : build scripts

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

node_modules : third‑party dependencies

src : source code written by developers

static : static assets

index.html : the single HTML entry page

package.json : project metadata and dependencies

Within src , the main directory contains index.js (the entry point for the main process) and index.dev.js (development helpers). The renderer directory holds the UI code, including assets , components , router , store , App.vue , and main.js .

Three Core Modules of an Electron App

Main Process : runs the script defined in package.json 's main field (e.g., background.js ) and creates BrowserWindow instances.

Renderer Process : each BrowserWindow runs its own renderer process, leveraging Chromium's multi‑process architecture, and can access Node.js APIs.

Inter‑Process Communication (IPC) : the main process manages windows and communicates with renderer processes via Electron's IPC mechanisms.

The article also lists example projects on GitHub and provides visual diagrams of the directory structures.