If we can build a website, we can also build a native desktop application for Windows, macOS, and Linux OS. This can be built using the same technology we used in web development that in HTML, CSS, and JavaScript. Electron is the framework used for this and it’s simpler than we think. It uses Node.js runtime for the backend and Chromium for the frontend. Here we discuss the steps to install Electron on Ubuntu OS.
What is Electron JS?
Electron is a framework for building cross-platform desktop applications with JavaScript, HTML and CSS.
Because it is cross-platform, we can run the app in Windows, macOS, and Linux operating systems. Otherwise, we need to have Visual Studio code for building Windows apps and Xcode for making macOS apps.
Which products uses Electron JS?
A lot of popular companies are using Electron JS for making their apps. Some of the giants in this list are Visual Studio Code, Whatsapp, Twitch, Slack Figma, etc.
Steps to install Electron on Ubuntu
So let’s look in to the steps to install Electron JS on Ubuntu operating system.
1. Install Node.js
Electron requires to have Nodejs(A JavaScript runtime) installed on our system.
16.2.0 is the current latest version and it can be installed by running the command below on our Terminal.
curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash - sudo apt-get install -y nodejs
2. Update NPM(Optional)
Node Package Manager(NPM) is automatically installed with the installation of Nodejs. But if we need to update it to the latest version, use the command below.
sudo npm install npm@latest -g
3. Install Electron globally
Now we can install Electron globally on our system using NPM.
npm i electron -g
4. Create an Electron project
So we have installed the Electron package on our Ubuntu system. Now let’s create a simple “Hello World” app using it.
4.1 Initialize the project
First, create a project directory and a package.json file under it.
Now direct to the folder and make a package.json inside it.
mkdir AwesomeProject cd /AwesomeProject npm init
Enter the project details if you wish or skip.
4.2 Create a View
Now create the file we wanted to be viewed when opening our app. Electron JS uses HTML to render the view. So we need to create an index.html file.
<html> <head> <title>Hello World Application</title> </head> <body> <h1>Hello World</h1> </body> </html>
4.3 Create an Index file
In package.json, we programmed that the root file of our project is index.js. So we need to create it. Some points about the structure of this index file are listed below.
- Import the components we need in our project
- Create a new browser window.
- Define the view it wants to show on loading the window(index.html).
const { app, BrowserWindow } = require("electron");
const url = require("url");
function newApp() {
win = new BrowserWindow();
win.loadURL(
url.format({
pathname: "index.html",
slashes: true
})
);
}
app.on("ready", newApp);
5. Running our application
Now we can run our Electron app using the command below. So execute the below command from root directory of our project.
electron .
Summary
So in this article, we have installed Electron JS on our ubuntu system. We also created a simple “Hello World” Electron JS app and run it on our system.
Thanks for this tutorial!
I had to use
`sudo npm install -g electron –unsafe-perm=true`
hey, i ve an express js+ ejs+ mysql project, which I want to convert using electron.
I tried, using the electron-starter-kit, that works fine, but when i try to add my existing project , its not working
plz guide, how to proceed
The link “https://deb.nodesource.com/setup_16.x” for installing npm can be updated to “https://deb.nodesource.com/setup_current.x” to install the latest npm install of v16.x.
For example, the current latest npm version has been updated to v19.x (v19.6.0 specifically at the time of writing).