Electron.js Developer

hire xamta infotech for your GUI Application Development

Certainly! Below is a simple example of an Electron.js application. This application creates a basic desktop window with a button that displays an alert when clicked. To run this application, you need to have Node.js and npm (Node Package Manager) installed on your system.

Firstly, create a new directory for your project, navigate into it using the terminal or command prompt, and then initialize a new Node.js project:

we are happy to serve you

Let's start a project.

mkdir electron-app
cd electron-app
npm init -y

Next, install Electron as a development dependency:

npm install electron --save-dev

Now, create the following files inside your project directory:

index.html:

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electron App</title>
</head>
<body>
    <button id="myButton">Click Me!</button>
    <script src="renderer.js"></script>
</body>
</html>

main.js:

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

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });

    mainWindow.loadFile('index.html');

    mainWindow.on('closed', function () {
        mainWindow = null;
    });
}

app.on('ready', createWindow);

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

app.on('activate', function () {
    if (mainWindow === null) createWindow();
});

we are happy to serve you

Let's start a project.

renderer.js:

javascriptCopy codedocument.getElementById('myButton').addEventListener('click', () => {
    alert('Hello, Electron!');
});

In this example, index.html contains a button, and when the button is clicked, it triggers an event in renderer.js to show an alert. The main application window is defined in main.js.

To run the Electron application, add the following script in your package.json file:

jsonCopy code"scripts": {
    "start": "electron main.js"
}

Now, you can start your Electron application by running:

npm start

This will launch the Electron application, and you'll see a window with a button. Clicking the button will show an alert with the message "Hello, Electron!".

we are happy to serve you

Let's start a project.

in Service

SSH DenyHosts Install and Configure

Implement Security by Xamta Infotech