Electron.js (formerly known as Atom Shell) is an open-source framework used for building cross-platform desktop applications using web technologies such as HTML, CSS, and JavaScript. Electron was originally developed by GitHub for their Atom text editor and has since been used by many popular applications such as Slack, Microsoft Teams, and Visual Studio Code. Electron framework helps you build a robust and secured desktop app.
In this article on electron js tutorial, we have detailed each aspect of Electron app development which will help you immensely. Read our full blog to understand this topic more profoundly and create your first electronjs app.
What is Electron.js
The framework is built on top of Chromium (the open-source version of Google Chrome) and Node.js, which allows developers to leverage web development technologies to create desktop applications that can run on multiple operating systems such as Windows, macOS, and Linux. Electron provides a set of APIs that allow developers to interact with the operating system, access the file system, and create native user interfaces.
Electron has gained popularity due to its ease of use, cross-platform compatibility, and ability to quickly create desktop applications using web technologies. With its wide range of third-party modules and libraries, developers can create powerful and feature-rich applications for a variety of use cases.
Why use Electronjs for desktop app development
ElectronJS is a popular framework for desktop app development because it allows developers to create cross-platform desktop applications using web technologies such as HTML, CSS, and JavaScript. There are very few software development companies that provide the best Electronjs app development services.
Here are some reasons why developers choose to use ElectronJS:
- Cross-platform compatibility: ElectronJS makes it easy to develop desktop applications that run on multiple platforms, including Windows, Mac, and Linux. This is because ElectronJS is based on platform-agnostic web technologies.
- Easy to learn: If you’re familiar with web development, you’ll find it easy to learn ElectronJS. You can use your existing knowledge of HTML, CSS, and JavaScript to create desktop applications.
- Large community: ElectronJS has a large and active community of developers who contribute to the development of the framework. This means that you can find lots of helpful resources, such as tutorials, documentation, and libraries, to help you build your application.
- Native app-like experience: ElectronJS allows you to create desktop app development that feel and look like native apps. You can use web technologies to create user interfaces that are responsive and interactive.
- Rapid development: With ElectronJS, you can rapidly develop desktop applications using web technologies. This can save you time and resources compared to developing native desktop applications.
How to use Electron for desktop app development
Sure, I can provide you with a brief explanation of how to use ElectronJS for desktop app development.
Here’s a step-by-step guide to creating a simple ElectronJS app:
Step 1: Install ElectronJS
You can install ElectronJS using Node Package Manager (NPM) by running the following command in your terminal:
| npm install electron –save-dev |
Step 2: Create a basic app structure
Create a new folder for your app and add the following files:
| – index.html
– main.js – package.json |
Here’s a basic index.html file that you can use as a starting point:
| <!DOCTYPE html>
<html> <head> <meta charset=”UTF-8″> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html> |
Step 3: Set up the main.js file
The main.js file is the entry point of your ElectronJS app. Here’s a basic main.js file that you can use as a starting point:
| const { app, BrowserWindow } = require(‘electron’)
function createWindow () { // Create the browser window. let win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // Load the index.html file. win.loadFile(‘index.html’) } // This method will be called when Electron has finished // initialization and is ready to create browser windows. app.whenReady().then(createWindow) |
Step 4: Set up the package.json file
The package.json file contains information about your app, such as the name, version, and dependencies. Here’s an example package.json file:
| {
“name”: “my-electron-app”, “version”: “1.0.0”, “description”: “My Electron app”, “main”: “main.js”, “scripts”: { “start”: “electron .” }, “author”: “Your Name”, “license”: “MIT”, “dependencies”: { “electron”: “^12.0.0” } } |
Step 5: Start the app
You can start your ElectronJS app by running the following command in your terminal:
| npm start |
This will launch your app in a new window.
That’s it! You now have a basic ElectronJS app up and running. You can customize the app by adding new HTML, CSS, and JavaScript files to your project.
If you are looking for a detailed answer on the process to build a desktop application from scratch then refer to our blog. Our Technical Chamber blogs help you code smarter and faster.
