How-to

Make Nearly Any Website an “App” with Nativefier


Ever wish you could just have that web app start at system startup? Running Linux where there’s no native desktop app but there is a web one? Now you too can wrap your own web thing of choice in a desktop app.

Nativefier is an easy to use Node.js based application that on Linux is very easy to install and quite user-friendly if you are comfortable with the CLI. It does support use on any OS that supports Node.js including Mac and Windows. You can check out the GitHub page here https://github.com/jiahaog/Nativefier

For brevity and clarity I’ll only be covering instructions to install and use Nativefier on Linux even though it does support other operating systems. I was missing Microsoft’s OneNote and didn’t want to fiddle with Wine so I’ll use Microsoft OneNote for the web as an example. Lets get started!

Web OneNote running in Nativefier wrapper on Ubuntu 18.04

Install Nativefier

I’m on Linux so presumably you’re using a package manager. For these instructions I’m using Apt on Ubuntu 18.04 but these instructions can be easily adapted to your package manager of choice.

  • Press Ctrl+Alt+T to open a terminal.
  • Type “sudo apt install nodejs nodejs-legacy npm”.
  • Answer Y for yes to install Node.

Now it’s time to install Nativefier. This is done with Node.js’s “npm” tool so this should work the same regardless of your Linux distro or even operating system. We will continue working in the terminal.

  • Type “npm install nativefier -g” Hit Enter.

Build Your Web App

We’re now ready to build our web app. As noted above we’re going to build OneNote as an example. This is a good example as it features a bit of bouncing around between domain’s which can be tricky. When you wrap a domain/URL with Nativefier if the page tries to go outside of its initial domain/URL it will pop open your default browser to show this has happened and allow you to see the new domain/URL. This allows you to build a list of domains that need to stay contained in your Nativefier app. You build this list in the –internal-urls flag followed by regex of the domains involved. You’ll see this below where OneNote loops through several domains just to do the login process. Lets build it!

  • Back in your terminal type:
    • nativefier –name “OneNote” “https://onenote.com” –internal-urls “(office|microsoft|onenote|live)”

As you can see this is very easy and pretty straight forward. In the case of OneNote the login process is trying to use office.com, microsoft.com and live.com during the login process so they have been included in the regex. It does parse by full regex so depending on your site’s processes more complex regex may be necessary.

Run It!

The above command will have built the app in to a directory it created in the root of wherever you ran the Nativefier command from. It will be named the name of your web app followed by the platform and bit identifier. In my case “one-note-linux-x64”. In that folder you will find an executable file labeled as the name of your application. You can run this with a double-click or a right-click and selecting “run”.

OneNote app folder and executable.

Get Fancy

Nativefier supports lots of options to help you customize your Electron app including the ability to inject your own CSS and Javascript files. While the standard user might not find that useful this does seem like it might be a fairly easy way to either customize the page you’re pulling from the web or to build a mostly self-contained app if you are trying to build something totally new. Make sure you go over and poke around in the Nativefier API documentation for all the little knobs and levers available to get your app just right.


View Comments