How to Install Electron Framework on Ubuntu 22.04 or 20.04

Electron Framework, a pivotal platform in desktop application development, is designed for those looking to install Electron Framework on Ubuntu 22.04 Jammy Jellyfish or its older stable release Ubuntu 20.04 Focal Fossa. Developed under the auspices of the OpenJS Foundation, this framework integrates web technologies such as HTML, CSS, and JavaScript, facilitating web developers’ transition to desktop application creation.

Features of Electron Framework:

• Chromium Integration: Electron harnesses the power of the Chromium browser engine for front-end rendering, ensuring a consistent and modern user interface.
• Node.js Backend: By integrating the Node.js runtime environment, Electron offers a robust backend, facilitating seamless web-to-desktop transitions.
• Versatile APIs: Electron’s diverse APIs enable native OS interactions, allowing applications to display web content and deeply integrate with the operating system.
• Web Development Synergy: Electron’s architecture is a boon for web developers, allowing them to utilize their existing skills in HTML, CSS, and JavaScript to craft desktop applications.
• Cross-Platform Deployment: Applications developed with Electron are inherently cross-platform, ensuring compatibility across Ubuntu, Windows, and macOS.

For Ubuntu enthusiasts, Electron presents a compelling proposition. Its ability to bridge the gap between web and desktop environments, combined with its cross-platform nature, makes it an invaluable tool. Moreover, the backing of the OpenJS Foundation and a thriving developer community ensures continuous improvements, extensive resources, and robust support.

This guide is tailored to guide you through installing the Electron Framework on Ubuntu. Detailed steps will elucidate the installation on Ubuntu 22.04 Jammy Jellyfish and Ubuntu 20.04 Focal Fossa using CLI commands.

Install Node.js For Electron on Ubuntu 22.04 or 20.04

The initial step in our journey towards Electron proficiency involves setting up the runtime environment that facilitates server-side JavaScript execution. This environment is provided by Node.js, a crucial prerequisite for using Electron. Through this segment, you will be expertly guided through the Node.js installation process on your Ubuntu system. All procedures will be carried out via the command-line interface (CLI), the hub of command execution on Linux systems.

Step 1: Refreshing Your Ubuntu System

Before delving into the installation process, we must ensure your Ubuntu system is up-to-date. Keeping your system current is a strategic move that helps circumvent potential conflicts arising from outdated packages. To accomplish this, execute the following command:

sudo apt update && sudo apt upgrade

This command acts as a dual operative; sudo apt update retrieves the latest versions of your system’s packages from the Ubuntu repositories, while sudo apt upgrade applies these updates, effectively upgrading your system to these latest versions.

Step 2: Install Initial Packages

A smooth Node.js installation requires the presence of specific packages, and we will also install a well-known developer build package for future support:

sudo apt install curl git build-essential

Step 3: Import NodeSource PPA on Ubuntu

For the actual installation of Node.js, we turn to the NodeSource repository. This repository maintains more recent versions of Node.js compared to the default Ubuntu repositories. You can select either the current stable version or the latest Long-Term Support (LTS) version of Node.js.

The stable version boasts the latest features, but the LTS version offers enhanced stability, making it the preferred choice for production environments. Depending on your preference, run one of the following commands to incorporate the NodeSource repository:

Option 1 – Import Node.js – Current Version:

curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash -

Option 2 – Import Node.js – LTS Version:

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo bash -

With the appropriate NodeSource repository now part of your system, a system update is required to recognize this new addition:

sudo apt update

Upon completion of the system update, Node.js can be installed using the following command:

sudo apt install nodejs

After the installation, you should verify the version of Node.js installed to ascertain successful setup. This can be accomplished by executing the command:

node --version

This command returns the version of Node.js currently installed on your system, thereby verifying the successful completion of your installation.

Install Electron Framework On Ubuntu 22.04 or 20.04

Before building our Electron application, we need to install the Electron framework. This process involves a few steps, each crucial to ensuring a smooth and successful installation.

Step 1: Create a New Directory For Electron Project on Ubuntu

Our first step is to create a new directory for our Electron project. This is where all the files related to our project will be stored. You can do this using the mkdir command followed by the directory’s name. Here’s how:

mkdir electron-app && cd electron-app

This command creates a new directory named electron-app and then navigates into it using the cd command.

Step 2: Initialize a New Node.js Application on Ubuntu

Next, we must initialize a new Node.js application in our project directory. This sets up the necessary Node.js environment for our Electron application. Unfortunately, the original text didn’t provide the command for this step. Here’s the correct command:

npm init -y

This command initializes a new Node.js application with default settings.

Step 3: Install Electron on Ubuntu 22.04 or 20.04

With our Node.js environment set up, we can now install Electron. We’ll use npm (Node Package Manager) for this, a package manager for the Node.js platform. Here’s the command:

npm install --save electron

This command installs Electron and adds it as a dependency in our project.

Verify Installation of Electron Framework on Ubuntu 22.04 or 20.04

After installing Electron, it’s a good practice to validate the installation to ensure everything is set up correctly. We can do this by checking the installed version of Electron. Here’s how:

./node_modules/.bin/electron --version

This command should display the installed Electron version, confirming the installation succeeded.

Create Your First Electron Application On Ubuntu 22.04 or 20.04

We’re ready to start building our first Electron application with Electron successfully installed. We’ll guide you through each step, explaining our actions and why.

Step 1: Create a Index.js File

The first step in creating an Electron application is to create a index.js file. This file will serve as the main process file for our application. Here’s the command to create this file:

nano index.js

This command creates and opens a new file named index.js in our project directory.

Step 2: Write Your Application Code

Next, we need to add some code to our index.js file. This code will define the behavior of our Electron application. Here’s the code:

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

function createWindow () {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

This code creates a new browser window and loads an HTML file named index.html into it when the application is ready.

Step 3: Create an HTML File

Our Electron application will display an HTML file in the browser window we created. So, our next step is to create an index.html file in our project directory. Here’s the command to create this file:

nano index.html

This command creates a new file named index.html in our project directory.

Step 4: Write HTML Code

With our index.html file created, we can now add some HTML code to it. HTML (Hyper Text Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page and tells the browser how to display the content. Here’s the HTML code for our application:

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello, Electron! From Linuxcapable.com</h1>
  </body>
</html>

This code creates a simple HTML document with a heading that reads “Hello, Electron! From Linuxcapable.com”.

Step 5: Start Your Electron Application

With our index.js and index.html files set up, we can now start our Electron application. We’ll do this using the npm start command. But before we do that, we need to add a start script to our package.json file. Open your package.json file and add a start script in the scripts section like this:

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

Example:

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^x.y.z"
  }
}

This tells npm to run the electron . command when you run npm start. The electron . command starts your Electron application.

Now, you should be able to run your Electron application with npm start. Here’s how:

npm start

This command starts our Electron application. A new window should open if everything is set up correctly, displaying “Hello, Electron!”.

Closing Thoughts

In this guide, we installed and set up the Electron framework on an Ubuntu Linux system. We started by creating a new directory for our project, initializing a Node.js application, and installing Electron. We then validated our installation by checking the Electron version. With the foundation laid, we created our first Electron application. We created a index.js file, wrote our application code, created an index.html file, and added some HTML code. Finally, we started our application and saw our work come to life.

This process, while straightforward, is a testament to the power and flexibility of Electron. It’s a framework that allows us to use web technologies to build desktop applications, bridging the gap between the web and the desktop. Whether you’re a seasoned developer or a novice starting, Electron provides a platform to create powerful applications running on multiple operating systems.