NodeJS + Electron.JS [DESKTOP]

Elektron to biblioteka, która umożliwia budować aplikacje desktopowe z wykorzystaniem javascript. Okno aplikacji to puste okno chromium bez zbędnych danych.

Tworzymy nowy projekt Elektron

1. Tworzymy nowy folder (nazwa: npm) dla aplikacji i inicjujemy npm

mkdir app && cd app
npm init

2. Instalujemy moduł elektron

npm install electron

3. Plik konfiguracyjny package.json powinien wyglądać tak

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^25.3.0"
  }
}

4. Tworzymy plik main.js i wypełniamy

const electron = require('electron')

const {app, BrowserWindow} = require('electron')
  const path = require('path')
  const url = require('url')
  
  function createWindow () {
    // Create the browser window.
    win = new BrowserWindow({
    width: 800,
    height: 600,
    })
    win.setBackgroundColor('#ff00a3'); // zmiana tła
    win.setMenu(null);//usuniecie paska menu
  
    // and load the index.html of the app.
    win.loadURL(url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
    }))
  }
  
  app.on('ready', createWindow)

5. Plik index.html

<!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>

Aby uruchomić projekt wydajemy komendę

npm start

lub tak:

./node_modules/.bin/electron . --enable-logging --app-dir=/home/kodzi/app