Developing Desktop Applications through Web Technologies with ElectronJS

In today’s rapidly evolving tech landscape, building cross-platform desktop applications that are not only user-friendly but also efficient is a common challenge. Traditional desktop application development can be complex and time-consuming. However, there’s a solution that offers a streamlined approach, allowing developers to leverage their web development skills to create powerful desktop apps. This solution is ElectronJS, and in this blog, we’ll explore why ElectronJS is the best choice for developing desktop applications and provide clear steps on setting up an ElectronJS app on your computer.

The Rise of ElectronJS

ElectronJS, often simply referred to as Electron, is an open-source framework that enables developers to create cross-platform desktop applications using web technologies. It was developed and maintained by GitHub, and it has gained tremendous popularity in recent years. Several well-known applications, such as Visual Studio Code, Slack, and Discord, are built using ElectronJS, underlining its capability to produce high-quality, performant desktop applications.

Key Features of ElectronJS

Before delving into how to set up an ElectronJS app, let’s take a closer look at some of the key features that make it an attractive choice for desktop application development:

1. Cross-Platform Compatibility: One of the most significant advantages of ElectronJS is its ability to run on multiple operating systems, including Windows, macOS, and Linux, without major code changes. This means you can write your app once and deploy it on various platforms.
2. Familiar Web Technologies: If you’re a web developer, you’ll feel right at home with ElectronJS. It allows you to build desktop applications using HTML, CSS, and JavaScript, which are skills you likely already possess.
3. Native Desktop Capabilities: ElectronJS provides access to native desktop features, such as system dialogs, clipboard functionality, and the file system. This means you can create applications that seamlessly integrate with the user’s operating system.
4. Large Ecosystem: ElectronJS has a vast ecosystem of plugins and packages available through npm (Node Package Manager). You can find libraries and tools to extend your application’s functionality and save time in development.
5. Active Community: A thriving community is essential for any open-source project, and ElectronJS is no exception. You can find extensive documentation, tutorials, and a helpful community to support your development efforts.

Now, let’s move on to the steps you need to follow to set up an ElectronJS app on your computer.

Setting Up Your ElectronJS Development Environment

To create an ElectronJS app, you’ll need to have Node.js and npm (Node Package Manager) installed on your computer. If you haven’t already installed them, you can download and install Node.js from the official website: Node.js. After successfully installing Node.js, you’ll have npm available as well. Once you have Node.js and npm ready, you can start building your ElectronJS app.

Step 1: Create a New Directory for Your Project

First, open your terminal or command prompt and create a new directory for your ElectronJS project. You can do this using the following command:

mkdir electronjs-app

Navigate into your project directory:

cd electronjs-app

Step 2: Initialize Your Project with npm

Now, you’ll initialize your project using npm. This command will create a package.json file, which contains important project configurations and dependencies:

npm init

You’ll be prompted to answer various questions about your project. Feel free to fill in the information as you see fit. The default values are usually fine for most projects.

Step 3: Install Electron

To install Electron, run the following npm command:

npm install electron --save-dev

This command installs Electron as a development dependency and saves it in your project’s package.json file. It’s essential to include Electron as a dev dependency because you don’t need it in your production environment.

Step 4: Create the Main Script

Next, create your main application script file. This file will be the entry point of your ElectronJS app. You can name it main.js or anything you prefer. Here’s a basic example of a main.js file:

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('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

Step 5: Create the HTML File

Create an HTML file (e.g., index.html) in your project directory. This HTML file will be the user interface of your ElectronJS app. You can write your HTML, CSS, and JavaScript code as needed.

Step 6: Update Your package.json

Open your package.json file and add the following lines under the "scripts" section to specify how to run your Electron app:

"scripts": {
  "start": "electron ."
}

This configuration tells Electron to run your app when you execute npm start in your project directory.

Step 7: Start Your ElectronJS App

You’re now ready to start your ElectronJS app. In your terminal, run the following command:

npm start

If everything is set up correctly, your ElectronJS app should launch, displaying your HTML interface.

Building Your ElectronJS App

Now that you’ve set up your development environment and created a basic ElectronJS app, it’s time to start building your application. You can enhance your app by adding features, integrating with APIs, and customizing the user interface to meet your specific requirements.

Accessing Native APIs

One of the powerful features of ElectronJS is its ability to access native APIs and functionalities of the host operating system. For example, you can use the electron.shell API to open the default browser, access the clipboard, and use the fs module to work with the file system. Here’s an example of opening a URL in the user’s default browser:

const { shell } = require('electron');

document.getElementById('open-link').addEventListener('click', () => {
  shell.openExternal('https://example.com');
});

Integrating Node.js Modules

ElectronJS allows you to use Node.js modules in your application. This means you can leverage the vast ecosystem of Node.js packages available through npm. To use a Node.js module, simply install it as a dependency and require it in your Electron app. Here’s how you can use the axios module to make HTTP requests in your app:

npm install axios --save

Then, in your JavaScript code:

const axios = require('axios');

axios.get('https://api.example.com/data')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

Packaging and Distributing Your App

Once you’ve built your ElectronJS app, you’ll want to package it and distribute it to your users. Electron provides tools like electron-builder that simplifies the process of packaging your app for different platforms and creating installer packages. You can install electron-builder as a dev dependency using npm:

npm install electron-builder --save-dev

Then, add a "build" configuration to your package.json file to specify the packaging settings. Here’s a basic example:

"build": {
  "appId": "com.example.myapp",
  "mac": {
    "category": "your.app.category",
    "target": "dmg",
    "icon": "build/icon.icns"
  },
  "win": {
    "target": "nsis",
    "icon": "build/icon.ico"
  },
  "linux": {
    "target": "AppImage",
    "icon": "build/icon.png"
  }
}

After configuring electron-builder, you can create packages for different platforms using the following command:

npx electron-builder build

This will generate installer packages for Windows, macOS, and Linux in the dist directory.

Conclusion

ElectronJS is undoubtedly one of the best frameworks available for developing cross-platform desktop applications using web technologies. Its ability to leverage web development skills, access native desktop capabilities, and its vast community and ecosystem make it a top choice for developers. By following the steps outlined in this blog, you can set up your ElectronJS development environment, create a basic app, and start building powerful desktop applications.

Whether you’re a web developer looking to expand into desktop applications or an experienced developer seeking a more efficient way to create cross-platform apps, ElectronJS is the solution you’ve been waiting for. So, why wait? Start developing your ElectronJS app today and take the first step towards building the next great desktop application.