To begin, we will set up a base electron app using an npm package called electron-forge.
Note: Electron Forge isn’t the only way to get started with Electron! There are other resources, like Electron Quick Start.
To get started, we need to go through a few steps.
- Find the terminal and navigate to your desired project location, for example:
cd ~/will navigate to your home directory.
- Install electron-forge globally:
npm install -g electron-forge
- Initialize a new project:
electron-forge init electron-app
- Change into that app’s directory:
Important files to watch out for in any Electron app:
Tell me why
Any Electron app has 2 types of processes that interact with each other. The main process, initialized by
package.json, and a renderer process generated by each web page.
package.json- Points to the app’s main file and lists your project’s details and dependencies.
package-lock.json- If you’re using NPM 5 or greater (you can check by running
npm -v), you’ll also get a
package-lock.jsonfile. This file aims to keep versions of dependencies identical across projects.
src/index.html- A web page to render. Each web page will spin off its own renderer process.
src/index.js- The default script called by
package.jsonto create windows and handle system events. Runs the app’s main process.
What is Node?
npm, short for “Node Package Manager”, is exactly as it is named: a manager for packages in Node. Dependencies and their versions are managed in apps through the
package.json file, and downloaded through