Electron - Installation

Electron - Modern Installation and Setup

To begin developing with Electron, you need Node.js and npm (Node Package Manager) installed. Node.js includes npm, so installing Node.js is sufficient. We recommend using a Node Version Manager (nvm) to manage multiple Node.js versions. If you don’t have Node.js installed, head over to the official Node.js website (nodejs.org) to download and install it. Aim for the latest LTS (Long Term Support) version.

Once installed, confirm that Node.js and npm are available by running the following commands in your terminal:

node --version
npm --version

You should see output similar to this (versions may vary):

v20.11.0
10.2.4

Every Node.js project, including Electron apps, uses a package.json file. This file lists project dependencies and other metadata. Let’s set up a new Electron project.

• Open your terminal or command prompt.
• Create a new directory for your project, for example, my-electron-app, and navigate into it: mkdir my-electron-app cd my-electron-app
• Initialize your project with a package.json file. The -y flag accepts default values:

npm init -y

Now, install Electron as a development dependency. This is the recommended way, as it versions Electron per project:

npm install --save-dev electron

To easily run your Electron app, add a script to your package.json file. Open package.json and modify the "scripts" section:

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",  // Ensure this is your main process file
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^28.0.0" // Version will vary
  }
}

Replace "electron": "^28.0.0" with the actual version installed. The "main": "main.js" entry points to the main script file Electron will run. We’ll create this file in later steps.

You can check the installed Electron version locally within your project using npx (which comes with npm):

npx electron --version

This should output the version of Electron you just installed, e.g.:

v28.1.0

With Electron installed and your project initialized, you’re ready to start building your first application.