How to install Electron Framework on Ubuntu 22.04

Hello, friends. In this post, you will learn how to install Electron Framework on Ubuntu 22.04

For those who don’t know, Electron is a framework for creating applications. Electron allows you to build cross-platform desktop apps with JavaScript, HTML, and CSS.

Therefore, if you are a web programmer, you will be able to use it to create your application without many problems.

One of the great advantages of using Electron is that it is compatible with macOS, Windows, and Linux. Its apps run on three platforms across all supported architectures.

Install Electron on Ubuntu 22.04

As you can imagine, we have to install Node.js as an initial dependency of Electron. They recommend that we always use the latest LTS version available.

Let’s go for it.

Install Node.js on Ubuntu 22.04

First, open your terminal and update the whole distro

sudo apt update
sudo apt upgrade

Then, you can download the installation script for version 18, which is the latest LTS version available.

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

Now, proceed to install the Node.js package.

sudo apt install nodejs

Next, check the versions of both node and npm.

node -v
v18.16.0

And,

npm -v
9.5.1

Now we are ready with Node.js

Installing Electron on Ubuntu

First create a folder with the name of your project and access it

mkdir project && cd project

Then, run

npm init

This command will ask you a series of configuration questions. In a common Electron application, the Author and description values can be whatever you want, but they are necessary.

Your package.json file will look something like this or similar

{
  "name": "project",
  "version": "1.0.0",
  "description": "Sample for Unixcop",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Angelo",
  "license": "MIT"
}

Now install Electron with its dependencies

npm install --save-dev electron

This will start the whole process without any major delays.

Edit the package.json file again and add a start like this

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

Again, save the changes and close the editor.

Now, start

npm start

However, from the official documentation we are told:

“Note: This script tells Electron to run in the root folder of your project. At this stage, your application will throw an error saying that it cannot find an application to run.”

Electron is ready, now it remains for you to continue the project, creating code in the main.js file and move forward.

Conclusion

Electron is one of the most important frameworks today. It allows us to create desktop applications with web technology.