How to Install Electron Framework on Ubuntu 22.04

Introduction

Before we discuss how to install Electron Framework on Ubuntu 22.04,let's first understand-What is Electron Framework?

Electron is a popular framework that allows developers to build cross-platform desktop applications using web technologies such as HTML, CSS, and JavaScript.

This tutorial will explain how to install the Electron framework on Ubuntu 22.04.

Advantages

1. Cross-Platform Development: Electron allows developers to build desktop applications that run seamlessly on multiple operating systems, including Ubuntu, Windows, macOS, and more.
2. Web Technologies: By leveraging web technologies like HTML, CSS, and JavaScript, developers can build desktop applications with familiar tools and skills.
3. Rich Eco-System: Electron has a vast ecosystem of plugins, frameworks, and community resources that extend its functionality and provide solutions for various development needs.
4. Native API Access: Electron gives developers direct access to native operating system APIs, allowing them to integrate with system-level features and deliver a more native-like user experience.
5. Rapid Prototyping and Development: Electron simplifies the development process by providing a ready-to-use framework, enabling developers to build and iterate on desktop applications quickly.

Install Node.js For Electron on Ubuntu 22.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.

Step 1: Refreshing Your Ubuntu System

Before delving into the installation process, we must ensure your Ubuntu system is up-to-date. To accomplish this, execute the following command:

sudo apt update && sudo apt upgrade

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 Node Source 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.

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

Install Electron Framework On Ubuntu 22.04

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

So our first step is to create a new directory for our electron project, as this is where all the files related to the project would be stored. This can be done using the following command:

mkdir electron-app && cd electron-app

A new directory named electron-app is created.

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

Next, we must initialize a new Node.js application in our project directory as it sets up the necessary Node.js environment for our Electron application and the command is:

npm init -y

This will initialize a new Node.js application with default settings.

Step 3: Install Electron on Ubuntu 22.04

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

Verify Installation of Electron Framework on Ubuntu 22.04

After installing Electron, we have to validate the installation to ensure everything is set up correctly, and it can be done by using the following command:

./node_modules/.bin/electron --version

It will confirm that the installation process is succeeded.

Create Your First Electron Application On Ubuntu 22.04

Now we are ready to build our first electron application by having it successfully installed.

Step 1: Create a Index.js File

Firstly, we have to create an index.js file, as this file will serve as the main process file of our application and the command to create the file is:

nano index.js

This command will create and open a new file named index.js in our project directory.

Step 2: Write Your Application Code

After creating the index.js file, we now need to add some code to that file. The code is as following:

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)

The above-mentioned code will help to load an HTML file named index.html into the new window of the browser.

Step 3: Create an HTML File

The electron application will display an HTML file in the browser window, and now we have to create an index.html file in our project directory. The command to create this file is:

nano index.html

Step 4: Write HTML Code

Once our index.html file is created, our next step is to add certain HTML code to it. The code is as following:

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

This code will create a simple HTML document.

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 ."
}

The electron . command starts your Electron application.

Now, we can be able to run Electron application with the following command:

npm start

This command starts our Electron application.

FAQs to Install Electron Framework on Ubuntu 22.04

Conclusion

We have gone through multiple steps on how to install Electron Framework on Ubuntu 22.04 in this tutorial.

If you have any queries you can ask them in the comments section and, we would be happy to respond to them.....