Ana Sayfa
en

Electron Installation and First Project

Electron Installation and First Project

What is Electron?

Electron is a framework that allows developers to create desktop applications using web technologies. By using common web languages like JavaScript, HTML, and CSS, it enables the development of cross-platform applications for Windows, macOS, and Linux. Thanks to the opportunities it offers to developers, the application development process becomes faster and more flexible.

Electron Installation

To start the Electron installation, Node.js must be installed on your computer. If you haven't installed Node.js yet, you can download and install it from the official Node.js website.

Installing Node.js

You can follow the steps below to download Node.js:

  1. Go to Node.js official website: nodejs.org
  2. Download the version suitable for your operating system.
  3. Open the downloaded file and follow the installation instructions.

Installing Electron

After installing Node.js, you can open the terminal and install Electron globally. Type the following command in the terminal:

npm install -g electron

Creating Our First Electron Project

After Electron is installed, we need to create a new folder and enter it to create our first project.

Creating a Folder

mkdir my-electron-app
cd my-electron-app

Creating the package.json File

To start our project, we need a package.json file. We can create this file with the following command:

npm init -y

Creating the Main Application File

Let's create a main file for our project. Below you can find the code that should be written in the main.js file:

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

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });
    win.loadFile('index.html');
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

Creating the HTML File

Also, let's create a file named index.html and add the following HTML content:

<!DOCTYPE html>
<html>
<head>
    <title>My First Electron App</title>
</head>
<body>
    <h1>Hello Electron!</h1>
</body>
</html>

Running the Application

When everything is ready, we should run the following command from the terminal to start our application:

npm start

Conclusion

Now we have created and run our first project with Electron. Electron is a powerful tool for those who want to develop standalone and cross-platform desktop applications. In this article, we examined the installation steps and how to create the first project. You can further enrich, expand, and add new features to the projects you develop.

Yorum Gönder