How to Create a Desktop App Using JavaScript ?

Last Updated : 28 Dec, 2023

Building a desktop application with JavaScript is possible using various frameworks and technologies. One popular approach is to use Electron, which is an open-source framework developed by GitHub. Electron allows you to build cross-platform desktop applications using web technologies such as HTML, CSS, and JavaScript. In this article, we are going to learn how to build a desktop app with JavaScript.

Prerequisites:

Node.js and npm

Steps to build a desktop app using JavaScript and Electron:

Step 1: Install Node.js and npm

Make sure you have Node.js and npm (Node Package Manager) installed on your machine. You can download them from the official website: Node.js

Step 2: Create a new project:

Create a new directory for your project and navigate into it in the terminal.

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

Step 3: Initialize a new Node.js project

Run the following command to initialize a new package.json file.

npm init -y

Step 4: Install Electron

Install Electron as a development dependency using npm.

npm install electron --save-dev

Step 5: Create main and renderer processes:

In your project directory, create two files, main.js and index.html. main.js will be the main process, and index.html will be the renderer process.

Example: This example shows the creation of a desktop app.

Javascript

//main.js
const { app, BrowserWindow } = require('electron');
 
let mainWindow;
 
function createWindow() {
    mainWindow = new BrowserWindow({
        width: 400,
        height: 300,
        webPreferences: {
            nodeIntegration: true,
        },
    });
 
    mainWindow.loadFile('index.html');
 
    mainWindow.on('closed', function () {
        mainWindow = null;
    });
}
 
app.whenReady().then(createWindow);
 
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit();
});
 
app.on('activate', function () {
    if (mainWindow === null) createWindow();
});

HTML

<!-- index.html -->
<!DOCTYPE html>
<html>
 
<head>
    <title>Desktop App</title>
</head>
 
<body>
    <h1>Hello, Geeks!</h1>
</body>
 
</html>

Step 6: Update `package.json`:

Modify the scripts section in your package.json file to include a start script.

"scripts": {
  "start": "electron main.js"
},

Step 7: Run your Electron app:

Execute the following command to run your Electron app.

npm start

This will launch your desktop application with Electron. You can further customize and enhance your app by exploring the Electron API and integrating additional packages as needed.

Output:

desktop-app

Suggest improvement

Introduction to ElectronJS

Environment Variables in ElectronJS

Share your thoughts in the comments