🏣 🖖 🚼 Writing a Graphical Application in Electron JS (Start: Creating a Window) 🌓 🤦🏼 🔄

Greetings! If you went to this article, then most likely you are extremely reluctant to go into the official documentation (and very in vain. It is written in detail and has a translation into Russian) and you came for a simple solution to your problem - writing a cross-platform application for a computer using only Web technologies. I suggest not to delay and start right away. But since this is the first article, I think it is worth telling in a nutshell about what Electron JS is and what it is for.

The official documentation says:

If you can make a website, then you can make a desktop application. Electron is a framework for building native applications with web technologies such as JavaScript, HTML and CSS. It takes care of the difficult parts, so you can focus on the main elements of your application.

Applications built with Electron are regular websites that run with the pre-installed Chromium web browser. In addition to the classic HTML5 API standards, it is possible to apply the entire list of Node.js modules and unique Electron features. Service modules provide access to the OS.

Yes, at first it would be nice for you to familiarize yourself with how websites are created. I will not focus on the details of the HTML and CSS code.

- , Electron JS. : Skype, Visual Studio Code, Slack .

.

. Visual Studio Code.

,

npm init

( , ).

npm Node.JS

Node.JS npm init , Node.JS . Node.JS . LTS . MacOS Windows , "

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

"start": "electron ."

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "author": "",
  "license": "ISC"
}

, . . Electron JS. Electron :

npm install -g electron

npm install electron -save

— package-lock.json — node_modules. . , . package.json :

  "main": "index.js"

, "index.js". :

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

let win;

function createWindow() {
    win = new BrowserWindow({
        width: 700,
        height: 500,
    });

    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }));

    win.webContents.openDevTools();

    win.on('closed', () => {
        win = null;
    });
}

app.on('ready', createWindow);

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

, , :

"width" "height" . 700 500 .
pathname: path.join(__dirname, 'index.html') , "index.js" , "index.html"
- Chromium win.webContents.openDevTools(); Chrome DevTools.

( c ).

index.html <body> , -, Hello world:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

- . :

npm start

, start package.json. . . :

, . , , , Web , .

P.S. , , , Electron, "" Electron`, ( ) , .

Writing a Graphical Application in Electron JS (Start: Creating a Window)

More articles: