In this lesson we want to learn How to Create Desktop App With JavaScript & Electron, so first of all let’s talk about ElectronJS.
What is ElectronJS?
ElectronJS is a framework that allows developers to build cross platform desktop applications using web technologies such as JavaScript, HTML and CSS. it is built on top of Chromium, the open source version of Google Chrome and Node.js, which provides runtime environment for JavaScript. with ElectronJS developers can use the same codebase to create applications for Windows, Mac and Linux. One of the main benefits of ElectronJS is that it allows you to use their existing web development skills to create desktop applications. Developers can use popular web frameworks such as React, Angular or Vue.js to build the user interface and Node.js to handle the backend logic.
Structure of ElectronJS
Structure of an ElectronJS application is composed of two main parts: main process, which runs on the desktop and manages the application’s lifecycle, and renderer process, which runs in a web page and handles the user interface. main process and the renderer process communicate with each other through inter process communication (IPC) mechanisms.
What Applications are Created with ElectronJs?
ElectronJS is used by many popular applications such as Visual Studio Code, Slack and Discord. it is also good for creating desktop applications that require offline capabilities, native system integration or access to hardware devices.
How to Create Desktop App With JavaScript & Electron
This is basic example of how to create a desktop app with JavaScript and Electron:
- First, you need to install Electron by running the following command in your terminal: npm install electron
- After that navigate to an Empty Directory to setup the project and run the following command npm init, this command generate the package.json file.
- In this directory create new file called main.js and another called index.html.
- In your main.js file, you will need to set up your Electron app by importing electron module and creating new BrowserWindow object. Your code should look something like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const electron = require('electron'); const app = electron.app; const BrowserWindow = electron.BrowserWindow; let mainWindow; function createWindow() { mainWindow = new BrowserWindow({width: 800, height: 600}); mainWindow.loadURL(`file://${__dirname}/index.html`); mainWindow.on('closed', function() { mainWindow = null; }); } app.on('ready', createWindow); |
- In your index.html file you can set up the UI for your app using HTML and CSS. This is where you will add any buttons, text fields or other elements that you want to include in your app.
- To run your app, you can use the command electron . in your terminal. this will launch your app in new window.
- You can also build and package your app for distribution on different platforms, such as Windows, Mac or Linux.
This is just basic example and you can add more functionality and features to your app as you continue to develop it.
Also to run your application make sure that add this in your package.json file.
|
1 2 3 4 5 |
{ "scripts": { "start": "electron ." } } |
This will be our package.json file, also you can see our main file name is main.js, if you have index.js, then you need to change that.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ "name": "electron-example", "version": "1.0.0", "main": "main.js", "scripts": { "start": "electron ." }, "author": "", "license": "ISC", "description": "", "dependencies": { "electron": "^30.0.2" } } |
Run the code with npm start and this will be result.
Subscribe and Get Free Video Courses & Articles in your Email