Electron - для разработки нативных приложений

Electron — для разработки нативных приложений

Electron — фреймворк , разработанный GitHub. Позволяет разрабатывать нативные графические приложения для настольных операционных систем с помощью веб-технологий. Фреймворк включает в себя Node.js для работы с back-end и библиотеку рендеринга из Chromium.

Сайт: https://www.electronjs.org

Быстрый старт

# Клонируйте репозиторий быстрого старта
$ git clone https://github.com/electron/electron-quick-start

# Перейдите в репозиторий
$ cd electron-quick-start

# Установите зависимости и выполните
$ npm install && npm start

Демонстрационное приложение Electron Api

$ git clone https://github.com/electron/electron-api-demos
$ cd electron-api-demos
$ npm install
$ npm start

Создаем пустое приложение

Для начала создадим файл package.json, например такой:

{
  "name": "dp-configurator",
  "version": "0.1.0",
  "main": "main.js"
}

Если нужно запускать обычное node приложение, через npm start, то файл package.json, можно записать так:

{
  "name": "dp-configurator",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "node ."
  }
}

Для electron пишем так:

{
  "name": "dp-configurator",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

Устанавливаем electron:

npm install --save-dev electron

Простой файл main.js

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

function createWindow () {
  // Создаем окно браузера.
  let win = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // и загрузить index.html приложения.
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

Файл index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ДП Конфигуратор</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </head>
  <body>
    <h1>Привет мир!</h1>
    Юзаете 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>

Оставить комментарий