Skip to content

Exercise 1: Hello Electron! (Part 1)

David Neal edited this page May 31, 2018 · 3 revisions

There are several "boilerplate" projects that provide a great framework for building Electron apps. However, starting with a boilerplate can be overwhelming, because you are having to learn both Electron and the boilerplate project at the same time.

In my opinion, it's better to start by simply learning Electron. Then, once you have a good foundation in Electron, you will better understand the challenges these boilerplate projects solve.

Install required software (if you haven't already)

  1. Install Node.js
  2. Install Visual Studio Code
  3. Optional: Git

Create a new Node.js project folder

  1. Open Terminal / Command Window
  2. Change current directory to your Documents or where you store software projects
  3. Create a new directory for the project

Mac:

cd ~/Documents
mkdir electron-workshop

Windows:

cd "%userprofile%\My Documents" 
md electron-workshop

Initialize Node.js project

cd electron-workshop
npm init -y

Note: npm init creates a new package.json file. It's okay to choose the defaults. You can edit the package.json later, if you wish.

Install Electron

npm install --save-dev electron

Note: Every npm install in these exercises should be run from command line, from the root of your project directory.

Note: If there is an issue downloading electron, you can add the --verbose switch to see more details.

We will work together to finish Exercise 1 in Part 2!