Electron and Nativefier to create your own webapp from Ubuntu

WebApp electron ubunlog

In today's article we are going to take a look at Electron. The use of this framework for building applications together with a tool called Nativefier, it is becoming a universal solution with which package web applications for the desktop.

In this same blog we have already talked about some cases of webapp. In them we have known applications such as webcatalog. This is an extensive catalog in which we will find a large number of applications created with Electron. Some more examples of what we can create with this software would be applications such as Wmail, Skype, Simplenote, GitKraken or Visual Studio Code.

On some sites they say that nowadays we no longer need native applications for Linux. As everyone knows, the web is multiplatform, and that is why applications in general have been gradually moving to the web for years.

As they say in their web pageIf the user can build a website, a desktop application can be easily built. Electron is a framework for creating native applications with web technologies such as JavaScript, HTML and CSS.

Thanks to this, to use a web application we will only need a web browser. Today all browsers support features such as data storage on disk or notifications. These are the most typical that any webapp will need to use.

webapp ubunlog entry

Electron will allow us encapsulate web applications for own consumption in a simple way. After having tested it and verified that it works correctly, I must admit that without being clear about its real usefulness, at least it has been quite curious. Its real efficiency is not remarkable if we compare it with the consumption of resources that Chromium would do if extensions, when opening the same website. Electron is based on Chromium and in the runtime environment Node.js.

Electron has always raised the same question, what need do I have to create standalone applications when I can open them in tabs from the browser? The reasons can be from achieving a better integration with the desktop, to saving some resources to managing some sites in isolation. Here everyone will have to find their own answers.

Install Nativefier to create Electron WebApp on Ubuntu

To perform this task, the first thing we will do is install Node.js and its npm package manager. For this we are going to open the terminal (Ctrl + Alt + T) and write something like the following in it.

sudo apt install nodejs npm

At this point we are going to install the utility that will perform the conversion from the Node.js package manager. In the same terminal we write the following order.

sudo npm install nativefier -g

Now we can start creating our own web applications. We will only have to launch in the terminal (Ctrl + Alt + T) something like the following:

nativefier ubunlog.com

Nativefier will begin to encapsulate the indicated website independently. At the same time it will retain its characteristics and will be assigned an icon and a name. The launcher of our application, along with the rest of the necessary files, we can find in a folder with the same name as the web in the directory from where we have carried out the previous action.

creating webapp electron

It must be clarified that Nativefier will allow us apply different options to the applications that we want to package. You can check the documentation on its page GitHub. These options range from the possibility of customizing the name of the application, adding an icon and ending with modifying the default dimensions of the window, among others. It should also be noted that we will allow embedding JavaScript or CSS code on the webapp. The possibilities open to us are multiplying.

To finish, we can only ask ourselves if these types of applications are more comfortable or generate a sufficiently high saving of resources on our devices. Because we can do practically the same by adding a direct link to our desktop with both Chrome and Chromium. This is up to everyone's taste.


Leave a Comment

Your email address will not be published. Required fields are marked with *

*

*

  1. Responsible for the data: Miguel Ángel Gatón
  2. Purpose of the data: Control SPAM, comment management.
  3. Legitimation: Your consent
  4. Communication of the data: The data will not be communicated to third parties except by legal obligation.
  5. Data storage: Database hosted by Occentus Networks (EU)
  6. Rights: At any time you can limit, recover and delete your information.

  1.   Cristina said

    Hello and what commands can I use to remove it, plus electron that was downloaded as part of the installation? Thanks for your blog, I'm on kde neon