Learn how to – Convert any Website / Web page to desktop application using Nativefier

Learn how to – Convert any Website / Web page to desktop application using Nativefier.

Did you know you can convert any web page to a Desktop application from your OS command line interface?. In this blog post I’ll introduce you to an awesome tool called Nativefier. Nativefier is a command-line tool that lets you create a desktop app for any web site with minimal configuration. Created Desktop Applications are wrapped by Electron (which uses Chromium under the hood) in an OS executable (.app, .exe, etc) for use on Windows, macOS and Linux.

Nativefier features:

• Automatically retrieval of app icon / name.
• JavaScript and CSS injection.
• Many more, see the API docs or nativefier --help

How To Install Nativefier on Linux | macOS

How then can I install Nativefier on a Linux or macOS operating system?. The installation requirements are:

• macOS 10.9+ / Windows / Linux
• Node.js >= 10 and npm >= 6
• Optional dependencies:
  • ImageMagick to convert icons. Make sure convert and identify are in your system $PATH.
  • Wine to package Windows apps under non-Windows platforms. Make sure wine is in your system $PATH.

Install Node.js on Linux / macOS

The first installation requirement is Node.js. Install Node.js on Linux or macOS with below commands.

### Install Node.js on macOS ###
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
brew install node

### Install Node.js on Ubuntu / Debian ###
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

### Install Node.js on CentOS / Fedora / RHEL ###
curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -
sudo yum install nodejs

Installation of Nativefier on Linux | macOS

Once Node.js is installed, run the following command to install Nativefier globally:

$ npm install -g nativefier
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
/usr/local/bin/nativefier -> /usr/local/lib/node_modules/nativefier/lib/cli.js

> core-js@3.6.5 postinstall /usr/local/lib/node_modules/nativefier/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

+ nativefier@10.1.0
added 290 packages from 341 contributors in 75.93s

Using Nativefier to convert any web page to desktop application

In this example we’re converting ownyourlife.com.ng website to a Desktop Application.

$ nativefier "ownyourlife.com.ng"
URL "ownyourlife.com.ng" lacks a protocol. Will try to parse it as HTTPS: "https://ownyourlife.com.ng". Please pass "//ownyourlife.com.ng" if this is what you meant.

Preparing Electron app...

Converting icons...

Packaging... This will take a few seconds, maybe minutes if the requested Electron isn't cached yet...
Downloading electron-v10.1.0-darwin-x64.zip: [============================================================================================] 100% ETA: 0.0 seconds
Packaging app for platform darwin x64 using electron v10.1.0

Finalizing build...
App built to /Users/jkmutai/Documents/Home  ComputingForGeeks-darwin-x64 , move it wherever it makes sense for you and run the app bundle.

You can optionally specify the name of the app to be created:

nativefier --name 'Computingforgeeks' 'ownyourlife.com.ng'

Wait for it to complete then check created folder contents:

$ ls -1 ~/Documents/Home  ComputingForGeeks-darwin-x64
Home  ComputingForGeeks.app
LICENSE
LICENSES.chromium.html
version

To learn about all the available command line flags use:

$ nativefier --help

Go to folder to start the app.

Launch/Install the application generated by Nativefier.

You’ll then be able to control the Website or web page like a normal Desktop Application.

Running Nativefier using Docker

If you don’t want to install Node package you have the option of running the application as a Docker container.

Pull the latest Docker image:

docker pull jiahaog/nativefier

You can also clone the repository and build the image yourself.

git clone https://github.com/jiahaog/nativefier.git
cd nativefier
docker build -t nativefier .

By default, the command nativefier --help will be executed. To build e.g. a Gmail nativefier app to a writable local ~/nativefier-apps,

docker run -v ~/nativefier-apps:/target/ jiahaog/nativefier https://mail.google.com/ /target/

You can pass Nativefier flags, and mount volumes to provide local files. For example, to use an icon,

docker run -v ~/my-icons-folder/:/src -v $TARGET-PATH:/target jiahaog/nativefier --icon /src/icon.png --name whatsApp -p linux -a x64 https://web.whatsapp.com/ /target/

Tags:

• How to convert web page on Linux to a Desktop Application
• How to convert web page on macOS to a Desktop Application
• How to convert web page on Windows to a Desktop Application
• How to convert Website to a Desktop Application
• How to generate a Desktop Application from a Web page

Linux Learning Video materials.

• Linux Mastery: Master the Linux Command Line in 11.5 Hours
• Complete Linux Training Course to Get Your Dream IT Job 
• Learn Linux in 5 Days and Level Up Your Career
• Linux Administration Bootcamp: Go from Beginner to Advanced
• Complete Linux Bash Shell Scripting with Real Life Examples
• Linux Shell Scripting: A Project-Based Approach to Learning