Getting started with Electron Pt 1.

Electron is a fun and easy way to create desktop application from an mostly web based code. Of course websites aren't the most performance way to create an user-interface ( in terms of technical aspects such as memory, cpu consumption) but it's an extremely powerful experience rich way of doing that.




There are a lot of apps these days that work similarly: slack, visual studio code. These desktop version they are enriched with features that merely a browser cannot fulfill by itself.


1. Checkout the code from github
2. cd directory && npm install && npm start

You should now have a working electron mini browser working. By default it loads a page from the directory itself. You can change this to any type of url, even ones from internet itself. Like below is already enough to load google.com

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600, icon: path.join(__dirname, 'favicon.ico'), title: 'Reimburse-It' }) 

mainWindow.loadURL('https://google.com')

 If you want to customize the menu you need to do a little bit more changes. It starts by importing electron.Menu into your namespace. This holds two functions buildFromTemplate and
setApplicationMenu to create and change the menu.


const electron = require('electron')
// Module to control application life.
const app = electron.app
const Menu = electron.Menu 

Now for the actual dirt on actually creating an electron menu see below:

const template = [
  {
    label: 'File',
    submenu: [
      {role: 'minimize'},
      {role: 'close', 'label': 'Quit Application'}
    ]
  },  
  {
    label: 'Edit',
    submenu: [
      {role: 'undo'},
      {role: 'redo'},
      {type: 'separator'},
      {role: 'cut'},
      {role: 'copy'},
      {role: 'paste'},
    ]
  },
  {
    role: 'help',
    submenu: [
      {
        label: 'Learn More',
        click () { require('electron').shell.openExternal('https://google.com') }
      },
      {
        label: 'Articles & Discussion',
        click () { require('electron').shell.openExternal('http://blog.google.com') }
      }        
    ]
  }
]
  
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)