Architecture

Process segregation

Module separation

Browser Process Code

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

let mainWindow

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    icon: './icon.png',
  })

  mainWindow
    .loadURL(`file://${__dirname}/index.html`)
  mainWindow
    .on('closed', () => { mainWindow = null })
})

Renderer (client-side) code

Typical Elm App with Ports

-- interactions with localStorage 
-- to save the model
port getStorage : Maybe Model

port setStorage : Signal Model
port setStorage = model

Build & Packaging

Packager tool

elm-make Main.elm --output assets/elm.js &&

electron-packager . 
  --out=dist 
  --app-version=$npm_package_version 
  --asar 
  --prune --overwrite 
  --platform=linux,darwin 
  --arch=all