Electron ile executable desktop app

3 min readMay 24, 2024

Electron nedir?

Electron, JavaScript, HTML ve CSS kullanarak masaüstü uygulamaları oluşturmaya yönelik bir framework’tür. Electron, Chromium ve Node.js’i kullanarak Windows, macOS ve Linux’ta çalışan platformdan bağımsız uygulamalar oluşturmanıza olanak tanır.

İskeletin oluşturulması

electron-app adlı klasörümüzü oluşturup içerisinde npm init komutunu koşup projemizin başlangıcını oluşturuyoruz. npm init komutundan sonra description ve author alanları doldurulur. entry point ise main.js olarak ayarlanır.

mkdir electron-app
cd electron-app
npm init

package name: (electron-app)
version: (1.0.0)
description: electron
entry point: (index.js) main.js
test command:
git repository:
keywords:
author: JohnDoe
license: (ISC)

electron paketi projeye eklenir.

npm install --save-dev electron

Komut koşulurken SSL hatası alınır ise ekstra komutlar ve paket ekleme komutu koşulur.

npm config set registry http://registry.npmjs.org/
npm config set strict-ssl false

Projenin başlayabilmesi için package.json’a scripts bloğu eklenir.

"scripts": {
   "start": "electron ."
}

Uygulamanın başlatılması

Ana dizinde main.js dosyası oluşturulur. main.js pencere açma işlemleri için kullanılacaktır.

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('node:path')

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 768,
    height: 1024,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// 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.whenReady().then(() => {
  createWindow()

  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 (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

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

Ana dizinde preload.js dosyası oluşturulur. Html sayfası yüklendiğinde versiyonların görülmesi için preload.js kullanılacaktır.

// All the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

Ana dizinde index.html dosyası oluşturulur. Uygulamanın arayüzünde gözükmesi istenilen html oluşturulur. Başlangıç ekranında versiyon bilgileri ve chart gösterilir.

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>Electron App</title>
</head>

<body>
 We are using Node.js <span id="node-version"></span>,
 Chromium <span id="chrome-version"></span>
 and Electron <span id="electron-version"></span>.

 <div style="margin-top:20px">
  <canvas id="myChart"></canvas>
 </div>

 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

 <script>
  const ctx = document.getElementById('myChart');

  const data = {
   labels: [
    '20 Mayıs',
    '21 Mayıs',
    '22 Mayıs',
    '23 Mayıs',
    '24 Mayıs'
   ],
   datasets: [{
    label: 'Günlük Kazanç',
    data: [110, 160, 70, 30, 140],
    backgroundColor: [
     'rgb(255, 99, 132)',
     'rgb(75, 192, 192)',
     'rgb(255, 205, 86)',
     'rgb(201, 203, 207)',
     'rgb(54, 162, 235)'
    ]
   }]
  };
  new Chart(ctx, {
   type: 'polarArea',
   data: data
  });
 </script>

 <!-- You can also require other files to run in this process -->
 <script src="./renderer.js"></script>
</body>

</html>

npm run start komutuyla uygulama başlatılır.

Executable oluşturulması

Executable oluşturmak için electron-forge kullanılır. Electron Forge, Electron uygulamalarını paketlemeyi ve dağıtmayı sağlayan bir araçtır.

electron-forge paketi eklenir ve uygulama forge’a uyumlu hale getirilir.

npm install --save-dev @electron-forge/cli
npx electron-forge import

npm run make komutuyla executable oluşturulur.

Komut koşulurken SSL hatası alınır ise set NODE_TLS_REJECT_UNAUTHORIZED=0 ve executable oluşturma komutları koşulur.

Ana dizinde out klasörü altında setup ve executable dosyaları oluşur. electron-app.exe çalıştırılır ise uygulama başlamış olacaktır.

Electron ile executable desktop app

Electron nedir?

İskeletin oluşturulması

Uygulamanın başlatılması

Executable oluşturulması

Written by multinet-dev-35