Horje
How to Create a Desktop App Using JavaScript ?

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:

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


 


Reffered: https://www.geeksforgeeks.org

JavaScript

Related
JavaScript Program to Find the Area of Cylinder JavaScript Program to Find the Area of Cylinder
JavaScript Requests JavaScript Requests
JavaScript Program to Find the Area of Sphere JavaScript Program to Find the Area of Sphere
How to Change Tabs on Hover with CSS and JavaScript ? How to Change Tabs on Hover with CSS and JavaScript ?
How To Make Active Navbar In HTML CSS And JavaScript ? How To Make Active Navbar In HTML CSS And JavaScript ?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 12



 

Horje