Building A Simple Web Application With Electron A Step-by-Step Guide

Hey guys! Ever wanted to build a desktop application using your web development skills? Well, you're in the right place! Electron is the superhero framework that lets you do just that. It combines the power of Chromium and Node.js, allowing you to create cross-platform desktop apps with HTML, CSS, and JavaScript. This article is your friendly guide to building a simple web application with Electron. We'll break it down step by step, making sure even beginners can follow along. So, grab your coding cap, and let's dive in!

What is Electron?

Before we jump into coding, let's quickly understand what Electron is. Think of Electron as a magical bridge connecting the web world with the desktop world. It's an open-source framework developed by GitHub that allows you to build desktop applications using web technologies. This means you can leverage your existing knowledge of HTML, CSS, and JavaScript to create powerful desktop apps that run on Windows, macOS, and Linux. Electron essentially bundles your web application with a stripped-down version of Chromium (the browser engine behind Google Chrome) and Node.js (a JavaScript runtime environment). This combination gives you the best of both worlds: the familiar web development environment and the native capabilities of a desktop application.

One of the key advantages of Electron is its cross-platform compatibility. You write your code once, and Electron takes care of packaging it for different operating systems. This saves you a ton of time and effort compared to developing separate native applications for each platform. Plus, Electron provides access to native operating system APIs, allowing you to interact with the file system, display notifications, and much more. This makes it possible to create desktop applications that feel just as native as those built with platform-specific languages like Swift or Java. Whether you're building a simple utility app or a complex productivity tool, Electron provides a robust and versatile platform to bring your ideas to life.

The framework’s architecture is centered around two key processes: the main process and the renderer process. The main process acts as the application's entry point and controls its lifecycle. It's responsible for creating and managing browser windows, handling system events, and interacting with the operating system. Think of it as the conductor of an orchestra, coordinating all the different parts of your application. On the other hand, the renderer process is where your web application actually runs. Each browser window in your Electron app has its own renderer process, which is responsible for rendering the HTML, CSS, and JavaScript that make up your user interface. This separation of concerns is crucial for maintaining the stability and security of your application. If one renderer process crashes, it won't bring down the entire application, as the main process can simply restart it. This multi-process architecture is one of the reasons why Electron is so reliable and scalable, making it suitable for both small and large-scale desktop applications.

Setting Up Your Electron Project

Alright, let's get our hands dirty! First, you'll need Node.js and npm (Node Package Manager) installed on your system. If you don't have them already, head over to the official Node.js website (https://nodejs.org) and download the latest LTS (Long Term Support) version. npm usually comes bundled with Node.js, so you should have it ready to go after the installation.

Once you have Node.js and npm set up, create a new directory for your project. This will be the home for all your Electron app's files. Open your terminal or command prompt, navigate to the directory where you want to create your project, and run the following command:

mkdir my-electron-app
cd my-electron-app

This will create a new folder named my-electron-app and navigate you into it. Now, let's initialize our project with a package.json file. This file is like a manifest for your project, containing metadata like the project name, version, dependencies, and scripts. To create it, run the following command:

npm init -y

The -y flag tells npm to use the default values for all the prompts, so you don't have to answer a bunch of questions. Now that we have our package.json file, we need to install Electron as a development dependency. This means that Electron will be used during the development process but won't be included in the final packaged application. To install Electron, run this command:

npm install electron --save-dev

This command downloads and installs Electron into your project's node_modules directory and adds it as a dev dependency in your package.json file. Next, we need to create our main Electron application file. This file will be the entry point for our application and will handle creating the browser window and loading our web content. Create a new file named main.js in your project directory. This file will contain the core logic for our Electron application. Now, we're ready to start coding our Electron app!

Building the Main Process

The main process is the heart of your Electron application. It controls the application's lifecycle, creates and manages browser windows, and handles interactions with the operating system. This process runs in a Node.js environment, giving you access to Node.js modules and APIs.

Open up the main.js file you created earlier and let's start coding. First, we need to import the necessary modules from Electron. We'll need the app module, which controls the application's event lifecycle, the BrowserWindow module, which creates and manages application windows, and the ipcMain module, which allows communication between the main process and the renderer process. Add the following code to the top of your main.js file:

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');

Here, we're using Node.js's require function to import the app, BrowserWindow, and ipcMain modules from the electron package. We're also importing the path module, which provides utilities for working with file and directory paths. Next, we need to define a function that will create our main application window. This function will create a new BrowserWindow instance, load our web content into it, and handle window events. Add the following code to your main.js file:

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false,
      contextIsolation: true
    }
  });

  mainWindow.loadFile('index.html');

  // Open the DevTools automatically when the app starts
  // mainWindow.webContents.openDevTools()
}

In this function, we're creating a new BrowserWindow instance with a width of 800 pixels and a height of 600 pixels. We're also setting the webPreferences option to configure the behavior of the renderer process. The preload option specifies a script that will be loaded into the renderer process before the web content is loaded. This script can be used to expose Node.js APIs to the renderer process in a safe and controlled way. We're setting nodeIntegration to false and contextIsolation to true for security reasons. This prevents the renderer process from directly accessing Node.js APIs and isolates the renderer process from the main process. Finally, we're loading our web content from the index.html file using mainWindow.loadFile(). We've also commented out the line that opens the DevTools automatically. You can uncomment this line during development to debug your application.

Now, we need to call the createWindow function when the Electron application is ready. We can do this by listening for the app.whenReady() event. Add the following code to your main.js file:

app.whenReady().then(() => {
  createWindow();

  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
});

This code registers a listener for the app.whenReady() event, which is emitted when Electron has finished initializing. When the event is emitted, we call the createWindow function to create our main application window. We're also adding a listener for the app.on('activate') event, which is emitted when the application is activated (e.g., when the user clicks the application icon in the dock). On macOS, it's common to re-create a window when the dock icon is clicked and there are no other windows open. This code implements that behavior. Finally, we need to handle the app.on('window-all-closed') event, which is emitted when all application windows are closed. On macOS, it's common for applications to stay active until the user explicitly quits them. On other platforms, the application should quit when all windows are closed. Add the following code to your main.js file:

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
});

This code registers a listener for the app.on('window-all-closed') event. If the platform is not macOS (darwin), we call app.quit() to quit the application. That's it for the main process! We've set up the basic structure of our Electron application and created a main window that will load our web content.

Creating the Renderer Process

The renderer process is where your web application lives within Electron. It's responsible for rendering the user interface and handling user interactions. Each browser window in your Electron app has its own renderer process, which runs in a separate JavaScript context.

Let's create the basic HTML structure for our application. Create a new file named index.html in your project directory and add the following code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Electron App</title>
</head>
<body>
  <h1>Hello from Electron!</h1>
  <p>We are using Node.js <span id="node-version"></span>, Chromium <span id="chrome-version"></span>, and Electron <span id="electron-version"></span>.</p>
</body>
</html>

This is a simple HTML file with a heading and a paragraph. We've added some placeholders for the Node.js, Chromium, and Electron versions, which we'll populate later using JavaScript. Now, let's create a preload script that will expose Node.js APIs to our renderer process in a safe way. Create a new file named preload.js in your project directory and add the following code:

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('versions', {
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron
  // we can also expose variables, not just functions
});

In this script, we're using the contextBridge module to safely expose APIs to the renderer process. We're exposing an object named versions with functions that return the Node.js, Chromium, and Electron versions. This allows us to access these versions in our renderer process without compromising security. Finally, let's add some JavaScript to our index.html file to populate the version placeholders. Add the following code to the end of the <body> section:

<script>
  const versions = window.versions
  document.getElementById('node-version').innerText = versions.node()
  document.getElementById('chrome-version').innerText = versions.chrome()
  document.getElementById('electron-version').innerText = versions.electron()
</script>

This script retrieves the versions object from the window object (which was exposed by our preload script) and uses it to populate the version placeholders in our HTML. That's it for the renderer process! We've created a basic HTML structure and a preload script that exposes Node.js APIs in a safe way.

Running Your Electron Application

We've written the code for our main process and renderer process, so now it's time to run our Electron application! To do this, we need to add a script to our package.json file that will launch Electron. Open your package.json file and add the following line to the "scripts" section:

  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },

This adds a new script named start that runs the electron . command. This command tells Electron to launch our application using the current directory as the project root. Now, you can run your application by running the following command in your terminal or command prompt:

npm start

If everything is set up correctly, you should see a new window pop up with your Electron application! You should see the "Hello from Electron!" message and the Node.js, Chromium, and Electron versions displayed below it. Congratulations, you've built your first Electron application!

Conclusion

Awesome job, guys! You've successfully built a simple web application with Electron. We covered the basics of Electron, including the main process, renderer process, and preload script. You learned how to set up an Electron project, create a main window, load web content, and expose Node.js APIs to the renderer process in a safe way. But this is just the beginning! Electron is a powerful framework with a ton of features and capabilities. You can use it to build all sorts of desktop applications, from simple utilities to complex productivity tools.

Now that you have a basic understanding of Electron, I encourage you to explore further and experiment with different features and APIs. Check out the Electron documentation (https://www.electronjs.org/docs) for more information and examples. You can also find a wealth of resources and tutorials online to help you build more advanced Electron applications. Keep coding, keep learning, and have fun building awesome desktop apps with Electron!