Electron hello world app | Ebots

Electron is a framework for building desktop apps with CSS, Javascript and HTML.
Here is a five minute guide line to start with electron.

Video introduction

1. Installing Node.js

Install node.js. Download and install it.
2. Install electron
Open command terminal (cmd.exe for windows)
change the directory to your app folder.
enter the command

npm install electron --save-dev

3. File structure

Electron app is structured like this.

Hello_world/
├── package.json
├── index.js
└── index.html

Create a folder named "Hello_world" or any as your wish.

4. package.json

Inside the folder create a file named "package.json"

{
  "name"    : "Hello_world",
  "version" : "0.1.0",
  "main"    : "index.js"
}

5. index.js

Inside the folder create a file named "index.js"

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, frame: true, })

// and load the index.html of the app.

win.loadURL(url.format({

pathname: path.join(__dirname, 'index.html'),

protocol: 'file:',

slashes: true

}))

// Emitted when the window is closed.

win.on('closed', () => {

win = null

})

}

app.on('ready', createWindow)

// Quit when all windows are closed.

app.on('window-all-closed', () => {

if (process.platform !== 'darwin') {

app.quit()

}

})

app.on('activate', () => {

if (win === null) {

createWindow()

}

})

6. index.html

Inside the folder create a file named "index.js"





<!DOCTYPE html>


<html>


<head>


<meta charset="UTF-8">


<title>Hello World!</title>


<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>


</head>


<style>


body {


font-family: 'Roboto';font-size: 48px; font-weight: 300;


background-color: #2B2E3B;  margin: 0; padding: 0;


color: #C1F4FE;




}


#svg{


margin: 200px 0 0 0;


}


</style>


<body align="center">




<div id="svg"> <img src="electron.svg" alt="electron"> </div>


<p>Hello World!</p>


</body>


</html>

place the electron logo in the folder.

7. Run Electron hello world app

Now let’s get back to the electron . command. run

electron .

You have a window like this:

Now make your own app. You can get all the code I used here.

Pages

eduiot