contador web Skip to content

Create webapps with Nativefier

Diolinux

We have talked here at Diolinux a few times about webapps, like the Ice for Ubuntu and Mint it’s the Tangram. This time, we will introduce you to Nativefier, a command line tool to transform any website into a desktop application.

Open source and multiplatform, it is available for both Linux, Windows and MacOS. Basically, Nativefier uses Electron to package the website in an executable of the target system.

The main difference between Nativefier and alternatives like Ice and ElementaryOS Webpin is its possibility of customization. Through a series of commands, it is possible to change from simpler things like the name and icon of the application, to the architecture (32-bit, 64 or ARM), Electron version and even inject CSS or JS code.

To install Nativefier, you must have installed NodeJS and the NPM package manager first. The procedure is quite simple:

In Ubuntu, Linux Mint and derivatives, just use the following command in the terminal:

sudo apt install nodejs npm

In Fedora, the command is very similar:

sudo dnf install nodejs npm

After installing NodeJS, we will use the NPM package manager to install Nativefier. Just enter the following command in the terminal:

sudo npm install nativefier -g

That done, Nativefier is ready to be used. The procedure for creating a webapp is quite simple. Just open a terminal in the folder where you want to install the webapp files, and enter the following command:

nativefier --name “Nome do App” https://play.diolinux.com.br

In the command, just replace “App Name” with the name of your choice and the URL of the command with the desired website.

Nativefier has a list of commands available to modify your webapp and you can check clicking here.

To run the application, there are two options: create a .desktop file to access the webapp through the menu, or open the terminal in the folder where the files are located and start with the following command (replacing the name of the executable file in your folder) :

./nomedoarquivo

In the Diolinux channel there is a video teaching how to create .desktop files and you can check it in the video below:

Something I always do every time I install a new system is to install Whatsapp Web through Nativefier, using a javascript code to make Whatsapp with the dark theme. For that, I enter the Userstyles, select the customization I want and click on “Install style as userscript”. Once this is done, a .js file will be downloaded containing all the CSS customization to make Whatsapp (in this case) dark.

That done, just do the following command:

nativefier --name “Whatsapp” --inject “arquivo.js” https://web.whatsapp.com

In «file.js», you must change to the location where the downloaded file is located. It is also possible to simply drag the file to the terminal, and the location will be informed automatically.

That done, just start the app and go!

If you want to know more, watch this video by Diolinux about Nativefier:

If you have any questions about technology, or want to share knowledge with the community, Diolinux Plus it is the ideal space for that. Come and be part of our community!

To the next!


Have you seen any errors or would you like to add any suggestions to this article? Collaborate, click here.