From Web Page to Native Application

•3 min read
#blog#github#javascript

There are websites that don't have a native application for your operating system and you have to have multiple tabs at once. That's why I propose you compile your own native app

With the explosion of JavaScript we increasingly see more complete and functional websites. They are no longer simple web pages, but we can call them web applications due to their very complete functionality. The main problem is that many times these websites don't have native applications for our operating systems so we have to look for alternatives on the internet or have many tabs open depending on each person's needs.

Is It Possible to Convert a Web Into a Native App Without Programming?

The short answer is Yes. We can "encapsulate" that web in a browser and simulate a native application thanks to a tool called Electron. Among the native applications we can find created with this tool:

  • Visual Studio Code
  • Whatsapp
  • Twitch
  • Microsoft Team
  • Figma

Although there are other tools like React-Native and Flutter but to be able to compile websites made with these technologies you must have access to the source code which is not our case.

How Do I Do It?

In this tutorial I intend to use Nativefier. Nativefier is a command line made in NodeJS to easily create desktop applications from any website with minimal configuration. These applications are created with Electron (which uses Chrome under the layer). You can compile these webs to Windows, Mac and Linux.

Installation

To install it you must first have Node installed. Once Node is installed we proceed to install Nativefier: npm install nativefier -g

Compile a Web

For this tutorial we're going to compile QvaPay, an online payment processor focused on cryptocurrencies. To compile it for Linux we execute the following command:

nativefier -p linux -a x64 -n QvaPay https://www.qvapay.com/
  • with -p linux we indicate to which platform we want to compile. By default it's your computer's operating system. It supports the following: "darwin", "linux", "mac", "mas", "osx", "windows"
  • with -a x64 we specify the CPU architecture of the application we want. By default it uses the architecture of the installed Node. It supports: "ia32", "x64", "armv7l", "arm64"
  • with -n QvaPay we specify the name of the executable
  • https://www.qvapay.com is the url of the site we want to compile This command will create a folder with the name QvaPay-linux-x64 and inside it will contain all the files necessary to run, including QvaPay, our executable.

In addition, we can indicate an icon, background color, window size, etc. To know all the possibilities that this tool offers you can execute the command:

nativefier --help

Conclusions

Without a doubt this tool is a great option for all those who want their favorite websites as native applications. You can find more information in its official repository. I based this tutorial on this article.