Wednesday, May 13, 2020

First Electron Desktop Application

FIRST ELECTRON DESKTOP APP PROJECT

Electron - framework to easily build desktop app using html, javascript, css.
Example of popular desktop app using electron - whatsapp desktop, atom editor, slack messenger

Install Nodejs
$ sudo apt-get update
$ sudo apt-get install nodejs

Install npm
$ sudo apt-get install npm

Install Electron
$ npm install --save-dev electron

Create work directory
$ mkdir -p /home/mzadmin/NODEJS/first_electron
$ cd /home/mzadmin/NODEJS/first_electron

---
$ npm init -y

For normal nodejs app:
$ cat package.json
{
  "name": "first_electron",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node ."
  }
}

Change to electron app:
  "scripts": {
    "start": "electron ."
  }

Electron app
$ cat index.js
const { app, BrowserWindow } = require('electron')
function createWindow () {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  win.loadFile('index.html')
}
app.whenReady().then(createWindow)

HTML appfile 
$ cat index.html
<html>
<body bgcolor="beige">
Hello electron world
</body>
</html>

RUN APP
$ npm start

LIST OF FILES
node_modules (directory 199mb)
package.json
index.js
index.html

PACKAGE app as exe
Install electron-packager (for use in npm scripts)
$ npm install electron-packager --save-dev

$ electron-packager <sourcedir> <appname> --platform=win32 --arch=x64


posted by RayRosli Abas at 10:35 PM

0 Comments:

Post a Comment

<< Home