There are numerous websites I use for my work that don’t have dedicated desktop applications designed for Ubuntu Linux, such as GitHub, GitHub Gists, GitLab and Jira. However, it’s now quite easy to turn these sites, or any website, into a desktop application using Electron.
In this quick project, I’ll show you how to create an Electron app for storing and cataloging code snippets using GitHub Gist using Nativefier on Ubuntu 20.04 LTS. The whole process takes just a few minutes!
Nativefier is written in Node.js so you’ll need to install the Node Package Manager package
npm in order to install the
nativefier application. A couple of commands in your Ubuntu terminal will set this up.
sudo apt install npm npm install -g nativefier
To create a desktop application from a web page using Electron, we just need to issue a simple command to the
nativefier application. This will create an Electron package that can be executed and run as a desktop application.
You can store and run the Electron apps from anywhere. I’ve put mine in the
snap directory in my home folder and then issued a command to Nativefier to create an application called GitHubGists from the website gist.github.com.
cd /home/matt/snap nativefier --name 'GitHubGists' 'gist.github.com'
To create an icon for your new Electron app you’ll need to create a “Desktop Entry” file. To do this open a terminal and enter the below command to open Gedit with superuser privileges.
sudo gedit /usr/share/applications/githubgist.desktop
To create a desktop entry, paste in the code below. You’ll need to change the paths and names to match the application you’re creating. When Electron creates the application it grabs an icon from the site, if one is present, which you’ll find in
resources/app/. You can change that to any icon you fancy.
[Desktop Entry] Encoding=UTF-8 Name=GitHub Gists Exec=/home/matt/snap/nativefier/GitHubGists-linux-x64/GitHubGists Icon=/home/matt/snap/nativefier/GitHubGists-linux-x64/resources/app/icon.png Type=Application Categories=Development;
Finally, logout of Gnome and log back in.
If you click the “Show Applications” icon, you should find your new Electron app present. Clicking this will open the site as a desktop application. If you want quick access to it, you can drag the icon to the Ubuntu dock to launch it with a single click.
Matt Clarke, Sunday, March 07, 2021