Recently a buddy suggested that we should take a project of his and move it to electron and I was like “sure, why not!”. The only problem: I got no clue about electron whatsoever. So here we go.

Chrome in a box

According to wikipedia, electron is a software framework that “combines the Chromium rendering engine and the Node.js runtime”. How do we use it to create some software? By installing node and npm.

To bootstrap my helloworld project, I followed the official getting started guide, which boils down to a structure like this:

helloworld/
├── package.json
├── main.js
└── index.html

Using npm init I created a package.json file with some bare minimum content. The only thing I entered when prompted was main.js when asked for “entry point”. This resulted in the following file:

{
  "name": "helloworld",
  "version": "1.0.0",
  "description": "yes",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Now, to actually get electron onto our machine, we need to instruct npm to get it for us:

npm install --save-dev electron

After npm finished downloading the internet, electron can be found in the folder node_modules/electron. Let’s not forget to update gitignore as we don’t want all that crap in our git repository:

$ echo "node_modules" >> .gitignore

The only thing left that we need to configure is the start command in package.json which will look like this:

{
  "name": "helloworld",
  "version": "1.0.0",
  "description": "yes",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Starting for the first time

To actually start our first app, we’ll need to do a little bit more:

  • Create an index.html to display something (although that’s optional to show something I suppose)
  • Create the file main.js that’s referenced above
  • Write some javascript into main.js

Basic javascript code

We put the following code (which is stolen straight from the getting started guide into our main.js file:

const { app, BrowserWindow } = require('electron')

function createWindow () {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

Now I don’t have index.html yet, but let’s see what happens if we start it anyway:

$ npm start

> helloworld@1.0.0 start /path/to/code/helloworld
> electron .

And there it is, an empty window showing up!

Some html to get us started.

Now, let’s create the index.html that we have referenced in our javascript code, so that we have something that we can show off:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Hello World</title>
</head>

<body>
  <h1>Hello World!</h1>
</body>
</html>

And after running npm start again (or just after refreshing using the usual browser shortcuts!!1) we see a wonderful “Hello World!” message from our first electron app.