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:
cd electron-app
Important files to watch out for in any Electron app:
package.jsonpackage-lock.jsonsrc/index.htmlsrc/index.js
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 runningnpm -v), you’ll also get apackage-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 bypackage.jsonto create windows and handle system events. Runs the app’s main process.
What is Node?
Node.js is the server side portion of full stack Javascript. Many websites are powered with Node, and it powers things on Electron as well. Node.js documentation is full of information that explain its functionality and purpose.
What is npm?
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 npm.