How to Build a JavaScript Desktop app with Electron
In this blog entry, I'll show you that it is so natural to fabricate a JavaScript Desktop application with Electron. After around 13 lines of code, you'll have a completely useful Electron application!
I will walk you through the code and make sense of all that there is to be aware. ????
What is Electron
We will utilize the Electron structure to make this application. Electron is a free and open-source system kept up with predominantly by GitHub.
It powers many applications, that the majority of you previously knew about: Discord, Slack, Notion, VSCode, Spotify, and some more.
The system is intended to allow designers to make work area applications utilizing web innovations like JavaScript, HTML, and CSS and run those applications inside a kind of the Chromium program motor while involving NodeJS for the backend climate.
Electron uncovered valuable APIs like the IPC (Inter-process correspondence module) that lets you to utilize the force of NodeJS from your Desktop application. Electron was initially worked for Atom that is an IDE grown likewise by GitHub.
Design of an Electron application
Here is the index format of a truly basic electron application:
.
??? index.html
??? index.js
??? node_modules
??? bundle lock.json
??? package.json
1 registry, 4 records
How about we start off by making a npm project, adding a few scripts, and introducing electron.
For this object, we should make a basic package.json record with npm init.
Ensure you additionally introduce the main library we will use in this task, Electron:
npm I electron
The package.json record will look something like this:
{
"name": "electron-blog-model",
"rendition": "1.0.0",
"depiction": "",
"fundamental": "index.js",
"scripts": {
"test": "reverberation \"Error: no test specified\" && leave 1"
},
"creator": "",
"permit": "ISC",
"conditions": {
"electron": "^20.0.2"
}
}
Presently run npm I to introduce every one of your conditions.
Electron applications comprise basically of two things.
You can consider them the front and the backend of an application.
Backend
In each electron application, you'll have an index.js record. This is the record you're really going to run. This record is answerable for making your work area application's principal window and appearing as though this is going:
const { application, BrowserWindow } = require("electron");
const createWindow = () => {
const win = new BrowserWindow({
width: 400,
level: 400,
});
win.loadFile("./index.html");
};
app.whenReady().then(() => {
createWindow();
});
How about we turn out every one of these lines.
const { application, BrowserWindow } = require("electron");
This is where you import the two most significant things you really want from Electron:
application; controls your application lifecycle
BrowserWindow; a class that you can use to make another program window
How about we use BrowserWindow to make a genuine program window:
const createWindow = () => {
const win = new BrowserWindow({
width: 400,
level: 400,
});
win.loadFile("./index.html");
};
createWindow capability completes two things:
it indicates a few properties for the program window, like width and level
it stacks a record called index.html
This is basically identical to opening a website page index.html in your program.
Be that as it may, createWindow ought not be called until Electron is completely instated. We should rest assured that it's completely instated when whenReady is called. This capability returns a Promise so you can chain it with then and have something like this:
app.whenReady().then(() => {
createWindow();
});
Front end
Like the index.js document, there's an index.html record that contains the UI of your application.
We should make an index.html record with some basic substance:
<!DOCTYPE html>
<html>
<head>
<title>This is my most memorable Electron app!</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
</head>
<body>
<h1>I made a Desktop App!</h1>
</body>
</html>
Up until this point we have a JavaScript document that makes a BrowserWindow and a basic HTML record that is shown when Electron becomes prepared.
Running your most memorable Electron application
Yet, how would we run this thing?
Add "begin": "electron .", to "scripts":
{
"name": "electron-blog-model",
"form": "1.0.0",
"portrayal": "",
"primary": "index.js",
"scripts": {
"begin": "electron .",//this is new
"test": "reverberation \"Error: no test specified\" && leave 1"
},
"creator": "",
"permit": "ISC",
"conditions": {
"electron": "^20.0.2"
}
}
At last, you should simply to run the accompanying order:
npm start
what's more, your most memorable Electron application will fire up shortly:
Congrats! You just assembled your most memorable work area application with JavaScript!
In the following instructional exercise, we will investigate a portion of the electron APIs, like ipcMain and ipcRenderer.
