Getting started with Electron

Liam

BU4
Messages
185
Reaction score
171
Points
818
Electron enables you to create desktop applications with pure JavaScript by providing a runtime with rich native (operating system) APIs. You could see it as a variant of the Node.js runtime that is focused on desktop applications instead of web servers.

This doesn’t mean Electron is a JavaScript binding to graphical user interface (GUI) libraries. Instead, Electron uses web pages as its GUI, so you could also see it as a minimal Chromium browser, controlled by JavaScript.

An example of an app built on electron is Discord.

Generally, an Electron app is structured like this:

Code:
your-app/
├── package.json
├── main.js
└── index.html

The format of package.json is exactly the same as that of Node’s modules, and the script specified by the mainfield is the startup script of your app, which will run the main process. An example of your package.json might look like this:

Code:
{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

Note: If the main field is not present in package.json, Electron will attempt to load an index.js.

The main.js should create windows and handle system events, a typical example being:

Code:
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

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

  // and load the index.html of the app.
  win.loadURL(url.format({
   pathname: path.join(__dirname, 'index.html'),
   protocol: 'file:',
   slashes: true
  }))

  // Open the DevTools.
  win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on('closed', () => {
   // Dereference the window object, usually you would store windows
   // in an array if your app supports multi windows, this is the time
   // when you should delete the corresponding element.
   win = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
   app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
   createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

Finally the index.html is the web page you want to show:

Code:
<!DOCTYPE html>
<html>
  <head>
   <meta charset="UTF-8">
   <title>Hello World!</title>
  </head>
  <body>
   <h1>Hello World!</h1>
   We are using node <script>document.write(process.versions.node)</script>,
   Chrome <script>document.write(process.versions.chrome)</script>,
   and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

Run your app
Once you’ve created your initial main.js, index.html, and package.json files, you’ll probably want to try running your app locally to test it and make sure it’s working as expected.

electron
You do not have permission to view link Log in or register now.
is an npm module that contains pre-compiled versions of Electron.

If you’ve installed it globally with npm, then you will only need to run the following in your app’s source directory:

Code:
electron .

Here is my example of an electron App.
Code:
const electron = require('electron');
const { app, BrowserWindow } = require('electron')
const url = require('url')
const path = require('path')
const notifier = require('node-notifier')
const {remote} = require('electron')

const {ipcRenderer} = require('electron')
const {globalShortcut} = require('electron')
var ffmpeg = require('ffmpeg');

const trayMenuTemplate = [
    {
        label: 'Exit',
        click: function () {
            app.quit();
        }
    }
]
let win
function createWindow() {
   win = new BrowserWindow()
   win.maximize()
   win.loadURL('https://specular.download/dashboard')
   win.setMenu(null);
   notifier.notify({
               title: 'Specular Desktop Process Started',
               message: 'Log into Admin Panel to get started.',
               sound: true,
               wait: false
            }, function (err, response) {
              
            });

            notifier.on('click', function (notifierObject, options) {
               console.log("You clicked on the notification")
        });

            notifier.on('timeout', function (notifierObject, options) {
               console.log("Notification timed out!")
        });
   win.on('app-command', (e, cmd) => {
        if (cmd === 'browser-backward' && win.webContents.canGoBack()) {
            win.webContents.goBack()
        }
    })
}

app.on('ready', createWindow)

The above will open a window in fullscreen and redirect to one of my sites. You can install these as desktop applications meaning you are able to distribute on all desktop platforms.

Full list of electron applications can be found here
You do not have permission to view link Log in or register now.
 

VerTical

CEO
Donator
Messages
0
Reaction score
-82
Points
664
electron is an open source library developed by GitHub for building cross-platform desktop applications and i like that atom is based on electron :grinning:
 

CabCon

Head Administrator
Staff member
Head Staff Team
Messages
4,998
Reaction score
2,918
Points
1,053
Electron enables you to create desktop applications with pure JavaScript by providing a runtime with rich native (operating system) APIs. You could see it as a variant of the Node.js runtime that is focused on desktop applications instead of web servers.

This doesn’t mean Electron is a JavaScript binding to graphical user interface (GUI) libraries. Instead, Electron uses web pages as its GUI, so you could also see it as a minimal Chromium browser, controlled by JavaScript.

An example of an app built on electron is Discord.

Generally, an Electron app is structured like this:

Code:
your-app/
├── package.json
├── main.js
└── index.html

The format of package.json is exactly the same as that of Node’s modules, and the script specified by the mainfield is the startup script of your app, which will run the main process. An example of your package.json might look like this:

Code:
{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

Note: If the main field is not present in package.json, Electron will attempt to load an index.js.

The main.js should create windows and handle system events, a typical example being:

Code:
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

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

  // and load the index.html of the app.
  win.loadURL(url.format({
   pathname: path.join(__dirname, 'index.html'),
   protocol: 'file:',
   slashes: true
  }))

  // Open the DevTools.
  win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on('closed', () => {
   // Dereference the window object, usually you would store windows
   // in an array if your app supports multi windows, this is the time
   // when you should delete the corresponding element.
   win = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
   app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
   createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

Finally the index.html is the web page you want to show:

Code:
<!DOCTYPE html>
<html>
  <head>
   <meta charset="UTF-8">
   <title>Hello World!</title>
  </head>
  <body>
   <h1>Hello World!</h1>
   We are using node <script>document.write(process.versions.node)</script>,
   Chrome <script>document.write(process.versions.chrome)</script>,
   and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

Run your app
Once you’ve created your initial main.js, index.html, and package.json files, you’ll probably want to try running your app locally to test it and make sure it’s working as expected.

electron
You do not have permission to view link Log in or register now.
is an npm module that contains pre-compiled versions of Electron.

If you’ve installed it globally with npm, then you will only need to run the following in your app’s source directory:

Code:
electron .

Here is my example of an electron App.
Code:
const electron = require('electron');
const { app, BrowserWindow } = require('electron')
const url = require('url')
const path = require('path')
const notifier = require('node-notifier')
const {remote} = require('electron')

const {ipcRenderer} = require('electron')
const {globalShortcut} = require('electron')
var ffmpeg = require('ffmpeg');

const trayMenuTemplate = [
    {
        label: 'Exit',
        click: function () {
            app.quit();
        }
    }
]
let win
function createWindow() {
   win = new BrowserWindow()
   win.maximize()
   win.loadURL('https://specular.download/dashboard')
   win.setMenu(null);
   notifier.notify({
               title: 'Specular Desktop Process Started',
               message: 'Log into Admin Panel to get started.',
               sound: true,
               wait: false
            }, function (err, response) {
             
            });

            notifier.on('click', function (notifierObject, options) {
               console.log("You clicked on the notification")
        });

            notifier.on('timeout', function (notifierObject, options) {
               console.log("Notification timed out!")
        });
   win.on('app-command', (e, cmd) => {
        if (cmd === 'browser-backward' && win.webContents.canGoBack()) {
            win.webContents.goBack()
        }
    })
}

app.on('ready', createWindow)

The above will open a window in fullscreen and redirect to one of my sites. You can install these as desktop applications meaning you are able to distribute on all desktop platforms.

Full list of electron applications can be found here
You do not have permission to view link Log in or register now.
Awesome tutorial :y:! Definitely will take a look into this.
 

VerTical

CEO
Donator
Messages
0
Reaction score
-82
Points
664
I have no idea.
lol, if we switch from .net framework to electron framework so we can create easy a app for every plattform. what we need only is JS. and this isn't hard :grinning: but you know the compiler -.- i think i can try to write the compiler over asp.net(c#) and host it as api for our project, you know what i mean :grinning:
 

Matt

Web Developer
Messages
245
Reaction score
215
Points
828
Fake and gay.


Nah but nice release, maybe it could support LUA in the future :wink:
 
Top