This Tutorial is About Making a Desktop App Using Electron.js

Introduction

In this tutorial, we will dive into the fascinating world of desktop application development using Electron.js. Whether you’re a seasoned developer or a beginner, Electron.js offers a powerful and versatile platform to build cross-platform desktop apps using web technologies like HTML, CSS, and JavaScript.

With the rise in popularity of web-based applications, Electron.js has emerged as a go-to framework for developing desktop applications. It allows developers to leverage their existing web development skills and create native-like experiences for Windows, macOS, and Linux.

So, if you’ve ever wondered how to bring your web app ideas to the desktop, this tutorial is for you. We will explore the core concepts of Electron.js, demonstrate its capabilities through practical examples, and equip you with the knowledge to build your own powerful desktop applications.

Why Choose Electron.js for Desktop App Development?

Electron.js has become the framework of choice for many developers due to its numerous advantages and the growing demand for cross-platform applications. Let’s take a closer look at the compelling reasons to choose Electron.js:

1. Familiar web development stack: Electron.js allows web developers to leverage their existing knowledge of HTML, CSS, and JavaScript. If you’re already proficient in these technologies, transitioning to Electron.js is a smooth and natural progression.
2. Cross-platform compatibility: Building separate applications for each platform can be time-consuming and costly. With Electron.js, you can write code once and deploy it on Windows, macOS, and Linux. This significantly reduces development time and effort.
3. Access to native features: Electron.js empowers your app with native capabilities, providing a seamless user experience. You can create system tray icons, customize native menus, interact with the file system, and utilize other platform-specific features.
4. Large developer community: Electron.js boasts a thriving community of developers, offering extensive support, libraries, and resources. This active ecosystem ensures that you can find solutions to common problems and stay up-to-date with the latest developments.
5. Rapid prototyping: Electron.js enables you to quickly build and iterate on your app ideas. With its flexible architecture and easy integration of front-end and back-end technologies, you can rapidly create prototypes and gather user feedback.
6. Comprehensive documentation: Electron.js provides comprehensive and well-organized documentation, making it easier for developers to get started and explore advanced features. The official Electron.js website is a valuable resource that offers tutorials, guides, and examples.

Now that we understand why Electron.js is an excellent choice for desktop app development, let’s move on to setting up our development environment.

Setting Up Your Development Environment

Before diving into building Electron.js apps, we need to set up our development environment. Here are the steps to get started:

1. Install Node.js:

To work with Electron.js, we need to have Node.js installed on our system. Node.js is a JavaScript runtime that allows us to execute JavaScript outside the browser. Download the latest version of Node.js from the official website (https://nodejs.org) and follow the installation instructions for your operating system.

2. Verify Node.js installation:

Once the installation is complete, open a terminal or command prompt and run the following command to verify that Node.js is installed correctly:

node --version

This command will display the installed version of Node.js. If the version number is displayed, it means Node.js is installed successfully.

3. Install a text editor or integrated development environment (IDE):

Choose a text editor or IDE that suits your preferences and provides features like syntax highlighting, code completion, and debugging capabilities. Some popular choices include Visual Studio Code, Atom, Sublime Text, and WebStorm. Install your preferred editor and ensure it is set up correctly.

4. Create a new project directory (Optional):

In your terminal or command prompt, navigate to the directory where you want to create your Electron.js project. Use the following command to create a new directory:

mkdir my-electron-app

Replace “my-electron-app” with the desired name of your project directory.

5. Initialize a new Node.js project:

Navigate into the newly created project directory using the following command:

cd my-electron-app

Once inside the project directory, run the following command to initialize a new Node.js project:

yarn init

This command creates a new package.json file, which keeps track of project dependencies and other essential information.

6. Install Electron.js:

Next, install Electron.js as a development dependency by running the following command:

yarn add --dev electron

This command installs the latest version of Electron.js and saves it as a development dependency in the package.json file.

Congratulations! You have set up your development environment for building Electron.js apps. In the next section, we will create our first Electron.js app.

Creating Your First Electron.js App

Now that our development environment is ready, let’s create a simple “Hello World” Electron.js application. This will help us understand the basic structure and components of an Electron.js app.

1. Create the main entry file:

In your project directory, create a new file named main.js. This file will serve as the entry point for our Electron.js app.

Open main.js in your preferred text editor or IDE and add the following code:

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);

Let’s understand what this code does:

• We import the necessary modules from the Electron.js package: app and BrowserWindow.
• We define a createWindow function that will create a new browser window when called.
• Inside the createWindow function, we instantiate a new BrowserWindow object with specified dimensions and web preferences.
• We load the index.html file into the newly created window.
• Finally, we call the createWindow function when the Electron.js app is ready.

2. Create the HTML file:

In your project directory, create a new file named index.html. This file will contain the HTML content that will be displayed in the Electron.js window.

Open index.html and add the following code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Electron.js!</title>
</head>
<body>
<h1>Hello, Electron.js!</h1>
</body>
</html>

This is a simple HTML file with a heading displaying the text “Hello, Electron.js!”.

3. Launch the Electron.js app:

To run the Electron.js app, open your terminal or command prompt, navigate to your project directory, and run the following command:

npx electron .

This command uses the npx tool, which comes bundled with Node.js, to execute the Electron.js binary for the current project directory. The dot (.) represents the current directory.

Voila! You should now see a new Electron.js window with the title “Hello Electron.js!” and the heading “Hello, Electron.js!” displayed.

Congratulations! You have created your first Electron.js app. This simple example demonstrates the basic structure of an Electron.js application. In the upcoming sections, we will dive deeper into various aspects of Electron.js app development.

Understanding the Main Process and Renderer Process

In Electron.js, applications are structured around two distinct processes: the main process and the renderer process. Understanding the differences between these two processes is crucial for developing Electron.js apps.

1. The Main Process:

The main process in Electron.js is responsible for managing the lifecycle of the application and creating windows. It runs in a single instance and is the entry point of the application.

The main process is typically defined in the main.js file. It controls the application’s behavior and interacts with the operating system.

In the previous example, the code in main.js was executed in the main process. It created a browser window and loaded the index.html file into it.

2. The Renderer Process:

The renderer process is responsible for rendering the user interface and executing JavaScript code in the context of individual web pages or Electron.js windows. Each Electron.js window runs in its own renderer process.

The renderer process is created by the main process and is responsible for displaying the HTML, CSS, and JavaScript content of an Electron.js app.

In the previous example, the index.html file was loaded into the browser window created by the main process. The code within index.html was executed in the renderer process.

The main and renderer processes communicate with each other using Electron’s inter-process communication (IPC) mechanism. This allows data and messages to be exchanged between different processes and enables powerful interactions within the app.

Understanding the main process and renderer process is crucial for developing Electron.js apps. In the next section, we will explore how to build user interfaces using HTML and CSS.

 

Building User Interfaces with HTML and CSS

HTML and CSS are the building blocks of user interfaces in Electron.js. They allow you to create visually appealing and interactive interfaces for your desktop applications. In this section, we will learn how to use HTML and CSS to build user interfaces in Electron.js.

1. Creating the HTML structure:

Start by creating the HTML structure for your user interface. Think about the elements you want to include and how they should be organized.

For example, let’s say we want to create a simple to-do list application. We can structure our HTML as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron To-Do List</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>My To-Do List</h1>
<form id="todo-form">
<input type="text" id="todo-input" placeholder="Add a new task...">
<button type="submit">Add</button>
</form>
<ul id="todo-list"></ul>
</div>
<script src="renderer.js"></script>
</body>
</html>

 

In this example, we have a container <div> that wraps all the elements. Inside the container, we have a heading, a form with an input field and a button, and an empty unordered list.

2. Styling with CSS:

To make our user interface visually appealing, we can apply CSS styles. Create a new file named styles.css in your project directory and add the following code:

body {
font-family: Arial, sans-serif;
}

.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}

h1 {
text-align: center;
}

form {
display: flex;
margin-bottom: 10px;
}

input[type="text"] {
flex-grow: 1;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}

button[type="submit"] {
padding: 5px 10px;
margin-left: 5px;
border: none;
background-color: #007bff;
color: #fff;
border-radius: 5px;
cursor: pointer;
}

ul {
list-style-type: none;
padding: 0;
}

li {
display: flex;
align-items: center;
margin-bottom: 10px;
}

li span {
flex-grow: 1;
}

li button {
margin-left: 5px;
border: none;
background-color: #dc3545;
color: #fff;
border-radius: 5px;
cursor: pointer;
}

In this CSS code, we define styles for the various elements in our to-do list application. We set the font family, apply styles to the container, heading, form, input field, button, unordered list, list item, and delete button.

3. Adding functionality with JavaScript:

To make our to-do list application interactive, we need to add JavaScript functionality. Create a new file named renderer.js in your project directory and add the following code:

const todoForm = document.querySelector('#todo-form');
const todoInput = document.querySelector('#todo-input');
const todoList = document.querySelector('#todo-list');

todoForm.addEventListener('submit', (e) => {
e.preventDefault();
const todoText = todoInput.value.trim();
if (todoText !== '') {
const todoItem = document.createElement('li');
todoItem.innerHTML = `
<span>${todoText}</span>
<button class="delete-btn">Delete</button>
`;
todoList.appendChild(todoItem);
todoInput.value = '';
}
});

todoList.addEventListener('click', (e) => {
if (e.target.classList.contains('delete-btn')) {
e.target.parentElement.remove();
}
});

In this JavaScript code, we select the necessary elements from the DOM using document.querySelector(). We add an event listener to the form’s submit event to handle adding new to-do items. When the form is submitted, we create a new <li> element with the entered task and a delete button. We then append the added item to the to-do list. We also add an event listener to the to-do list itself to handle deleting items when the delete button is clicked.

Save the changes, and now you have a functional to-do list application built with Electron.js, HTML, CSS, and JavaScript!

Distributing Your Electron.js App

Once you have developed your Electron.js app, you may want to distribute it to users. Electron.js provides diverse options for packaging and distributing your application, allowing users to install and use it on their machines.

Here are a few popular methods for distributing Electron.js apps:

1. Electron Packager: Electron Packager is a command-line tool that packages Electron.js apps into executable files for different platforms. It allows you to specify the target platform and architecture, creating standalone executables that users can run directly.
2. Electron Forge: Electron Forge is a complete toolset for building, packaging, and publishing Electron.js apps. It provides a standardized project structure, simplifies the development process, and offers built-in tools for packaging and distribution.
3. Electron Builder: Electron Builder is a powerful tool for packaging and distributing Electron.js apps. It supports various platforms and formats, including Windows, macOS, and Linux. It offers customization options and can generate installers, app bundles, and other distribution packages.

Before choosing a distribution method, consider the target platforms and your specific requirements. Each method has its own advantages and limitations, so choose the one that best suits your needs.

Conclusion

In this tutorial, we explored the process of building desktop applications using Electron.js. We covered the basics of setting up a development environment, creating an Electron.js app, understanding the main and renderer processes, building user interfaces with HTML and CSS, and distributing Electron.js apps.

Electron.js provides a powerful platform for building cross-platform desktop applications using web technologies. With its extensive API and vibrant community, you can create robust and feature-rich apps that run on Windows, macOS, and Linux.

So, what are you waiting for? Start exploring the world of Electron.js and unleash your creativity to build amazing desktop applications!