How to Build a Basic Desktop Application with Electron JS
How to Build a Basic Desktop Application with Electron JS
How to Build a Basic Desktop Application with Electron JS - In today's world, users want the convenience of using an application that works across all their devices, and as a developer, it's important to provide them with this convenience. One way to achieve this is by using Electron JS, a framework that allows developers to build cross-platform desktop applications using web technologies. In this article, we will learn how to build a basic desktop application using Electron JS, from setting up the development environment to packaging and distributing the final product.
Table of Contents
- Introduction to Electron JS
- Setting up the Development Environment
- Creating the Application
- Styling the Application
- Implementing Functionality
- Packaging and Distributing the Application
- Conclusion
- FAQs
1. Introduction to Electron JS
Electron JS is an open-source framework developed by GitHub that allows developers to build desktop applications using web technologies such as HTML, CSS, and JavaScript. Electron JS provides a Chromium browser, Node.js runtime, and APIs that allow developers to access the underlying operating system, making it possible to build cross-platform applications that work on Windows, macOS, and Linux.
2. Setting up the Development Environment
Before we can start building our application, we need to set up the development environment. We will need Node.js and NPM installed on our system. Once we have Node.js and NPM installed, we can install Electron JS globally by running the following command in our terminal:
npm install -g electron
3. Creating the Application
Now that we have set up our development environment, we can start creating our application. We will create a simple application that displays a message when the user clicks a button. We will start by creating a new directory for our project and navigating to it in our terminal. We can then initialize our project by running the following command:
npm init
After initializing our project, we can install the Electron JS package by running the following command:
npm install electron --save-dev
We can now create our main application file, which will be called main.js. In this file, we will create a new Electron JS application window and load an HTML file. Here's the code for main.js:
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('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
We also need to create an HTML file called index.html that will be loaded by our main application file. Here's the code for index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Electron App</title>
</head>
<body>
<button id="myButton">Click me!</button>
<div id="message"></div>
<script>
const { ipcRenderer } = require('electron')
const myButton = document.getElementById('myButton')
const message = document.getElementById('message')
myButton.addEventListener('click', () => {
message.innerText = 'Hello World!'
})
</script>
4. Styling the Application
Now that we have our basic application set up, let's add some styling to make it look better. We will create a new CSS file called styles.css and link it to our index.html file by adding the following line in the head section:
<link rel="stylesheet" href="styles.css">
In styles.css, we can add some basic styling to our button and message div:
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#message {
font-size: 24px;
margin-top: 20px;
}
5. Implementing Functionality
Our application currently displays a message when the user clicks the button. Let's add some more functionality to our application. We will use Electron's IPC (inter-process communication) module to communicate between the main process and the renderer process.
In main.js, we will add the following code to listen for an IPC message from the renderer process:
const { ipcMain } = require('electron')
ipcMain.on('show-dialog', (event, message) => {
dialog.showMessageBoxSync({ message })
})
In index.html, we will add the following code to send an IPC message to the main process when the user clicks the button:
const { ipcRenderer } = require('electron')
myButton.addEventListener('click', () => {
ipcRenderer.send('show-dialog', 'Hello from Electron!')
})
Now, when the user clicks the button, a message box will appear with the message "Hello from Electron!".
6. Packaging and Distributing the Application
Once we have finished developing our application, we need to package it into an executable file that can be distributed to users. We will use Electron Builder to package our application.
First, we need to install Electron Builder by running the following command in our terminal:
npm install --save-dev electron-builder
Next, we need to add a few configuration files to our project:
package.json: We need to add the following scripts to ourpackage.jsonfile:
"scripts": {
"start": "electron .",
"pack": "electron-builder --dir",
"dist": "electron-builder"
}
electron-builder.json: This file contains the configuration for Electron Builder. Here's an example configuration:
{
"appId": "com.example.my-electron-app",
"productName": "My Electron App",
"directories": {
"output": "dist"
},
"files": [
"main.js",
"index.html",
"styles.css"
],
"mac": {
"target": [
"dmg"
]
},
"win": {
"target": [
"nsis"
]
}
}
Now we can run the following command to package our application:
npm run dist
This will create a distributable file for our application in the dist directory.
7. Conclusion
In this article, we learned how to build a basic desktop application using Electron JS. We started by setting up the development environment, creating the application, styling it, and implementing functionality. Finally, we packaged the application into an executable file using Electron Builder.
Electron JS is a powerful framework
that allows developers to build desktop applications using web technologies. With its easy-to-use API and powerful features, Electron has become a popular choice for building desktop applications.
In this tutorial, we covered the basics of building a desktop application using Electron JS. However, there is a lot more to learn about Electron, such as working with native Node.js modules, building menus and context menus, using the tray module, and more.
I hope this article has been helpful in getting you started with Electron JS. If you have any questions or feedback, feel free to leave a comment below.
FAQs
- What is Electron JS?
- Electron JS is a framework for building desktop applications using web technologies such as HTML, CSS, and JavaScript.
- Can I build cross-platform desktop applications with Electron JS?
- Yes, Electron JS allows you to build cross-platform desktop applications for Windows, macOS, and Linux.
- Is Electron JS free and open-source?
- Yes, Electron JS is free and open-source software released under the MIT license.
- What are some popular desktop applications built with Electron JS?
- Some popular desktop applications built with Electron JS include Slack, Visual Studio Code, and Discord.
- Do I need to be an expert in web development to use Electron JS?
- No, you don't need to be an expert in web development to use Electron JS. However, having a basic understanding of web technologies such as HTML, CSS, and JavaScript will be helpful.
Related Posts
Web Development Companies in Maheshwar
Web Development Companies in Maheshwar – Maheshwar, a vibrant city in India, is home toRead More
Web Development Companies in Mandu
Web Development Companies in Mandu – In today’s digital age, having a strong online presenceRead More
Web Development Companies in Omkareshwar
Web Development Companies in Omkareshwar – Web development has become an integral part of establishingRead More
