Desktop Operations in ElectronJS with Example

In this example we want to learn about Desktop Operations in ElectronJS with Example, Desktop operations in ElectronJS allow you to interact with and control different aspects of the underlying operating system such as creating new files and folders, opening and closing windows and interacting with the system tray.

One example of desktop operation in ElectronJS is creating new folder. you can use the fs (file system) module to create new folder in the user’s file system. this is is an example of how to create new folder using the fs module:

const fs = require('fs');

// create a new folder
fs.mkdir('/path/to/new/folder', { recursive: true }, (err) => {
    if (err) {
        console.error(err);
    } else {
        console.log('Folder created successfully');
    }
});

const fs = require('fs');

// create a new folder

fs.mkdir('/path/to/new/folder', { recursive: true }, (err) => {

if (err) {

console.error(err);

} else {

console.log('Folder created successfully');

}

});

Another example of a desktop operation in ElectronJS is creating system tray icon. you can use electron.Tray class to create a tray icon and add context menu to it. this is an example of how to create a tray icon:

const { Tray } = require('electron');

// create a tray icon
const tray = new Tray('/path/to/icon.png');

// create a context menu
const contextMenu = Menu.buildFromTemplate([
    { label: 'Open', click: () => { /* open the app */ } },
    { label: 'Quit', click: () => { /* quit the app */ } }
]);

// set the tray icon's context menu
tray.setContextMenu(contextMenu);

const { Tray } = require('electron');

// create a tray icon

const tray = new Tray('/path/to/icon.png');

// create a context menu

const contextMenu = Menu.buildFromTemplate([

{ label: 'Open', click: () => { /* open the app */ } },

{ label: 'Quit', click: () => { /* quit the app */ } }

]);

// set the tray icon's context menu

tray.setContextMenu(contextMenu);

These are just couple examples of the many desktop operations that you can perform in ElectronJS. It is powerful tool and you can easily build cross platform desktop apps using it.

More on ElectronJS

Here’s an example of how to create basic ElectronJS application that opens a new window when the tray icon is clicked:

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

let mainWindow;
let tray;

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

    mainWindow.loadFile('index.html');

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

app.on('ready', () => {
    tray = new Tray('/path/to/icon.png');

    const contextMenu = Menu.buildFromTemplate([
        { label: 'Open', click: () => { mainWindow.show(); } },
        { label: 'Quit', click: () => { app.quit(); } }
    ]);

    tray.setContextMenu(contextMenu);
    tray.on('click', () => {
        mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
    });
    createWindow();
});

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

let mainWindow;

let tray;

function createWindow() {

mainWindow = new BrowserWindow({

width: 800,

height: 600

});

mainWindow.loadFile('index.html');

mainWindow.on('closed', function () {

mainWindow = null;

});

}

app.on('ready', () => {

tray = new Tray('/path/to/icon.png');

const contextMenu = Menu.buildFromTemplate([

{ label: 'Open', click: () => { mainWindow.show(); } },

{ label: 'Quit', click: () => { app.quit(); } }

]);

tray.setContextMenu(contextMenu);

tray.on('click', () => {

mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();

});

createWindow();

});

This code uses electron module to create new BrowserWindow and Tray object. BrowserWindow is used to create the main application window, and the Tray is used to create the system tray icon.

When the application is ready it creates new tray icon, sets the context menu for the tray icon, and sets an event listener for when the tray icon is clicked. when tray icon is clicked the main window is shown or hidden depending on its current visibility.

You can use this example as starting point for your own ElectronJS application and customize it to suit your needs.

It’s important to note that to run this code you need to have index.html file, otherwise it will give an error.

This is an example of a basic structure of an index.html file that you can use as starting point:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Electron App</title>
</head>
<body>
    <h1>Welcome to my Electron App</h1>
    <script>
        // JavaScript code for handling desktop operations goes here
    </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>My Electron App</title>

</head>

<body>

<h1>Welcome to my Electron App</h1>

// JavaScript code for handling desktop operations goes here

</script>

</body>

</html>

This file includes the standard HTML doctype and structure, with a head that includes the title of the app and a body that includes a welcome heading and a script tag where you can write the JavaScript code for handling desktop operations.

Note: You can run the application with npm start, also make sure that you have installed electronjs.