Intro to Electron

Raise your hand if you use...

You've used

What is Electron?

Why desktop apps?

Why Electron?

Anatomy of an Electron app

  1. package.json
  2. index.js (Main Process)
  3. index.html (Renderer Process)

package.json

                    
{
  "name": "electron-bare-bones",
  "version": "0.1.0",
  "main": "index.js"
}

index.js (Main Process)

                    
const electron = require('electron')

let win // global ref so window is not closed with JS is garbage collected

electron.app.on('ready', () => {
  win = new electron.BrowserWindow({ width: 800, height: 600 })
  win.loadURL(`file://${__dirname}/index.html`)
})

index.html (Renderer Process)

                    
<!DOCTYPE html>
<html>
  <head>
    <title>Electron Bare Bones App</title>
  </head>

  <body>
    <h1>Hello World</h1>

    <script>
      alert('Hi!')
    </script>
  </body>
</html>

Demo

Learn More