/ tuesdaytooling

Tooling Tuesday - Nativefier

Something new today! Make apps from web pages! I found this via a Hackaday blog post.

So what is it?

Nativfier is a tool which creates an app from a web page. The app is native to the operating system it is created on. So in my case Linux. It uses the electron framework to create the app.

Electron?
It is a tool that creates cross platform apps using JavaScript, HTML and CSS. The only downside to using it is the filesize, which for my test app is around 80MB!
But this is an interesting framework to build cross platform apps.

Nativefier was created by Jia Hao and it is super easy to use.
Screenshot-from-2018-12-11-19-52-06
I used it to create an offline version of @all_about_code excellent Edublocks project for micro:bit. Works reasonably well, and I can save my work and download it to a micro:bit.

So how do I install it?

Firstly you will need node.js installed on your machine.

For Linux installation it is best to follow this guide.
You can also install the Node Package Manager (npm) from your OS repository and this will also pull all the dependancies that it requires.

sudo apt install npm

For Windows and Mac users you will need to download and install the Node application.

Once npm is installed we then use it to install the nativefier tool.

npm install nativefier -g

So how can I use it?

Nativefier is a command line tool and so from the command line / terminal we issue the basic command as so.

nativefier <website address>

So for example, to build an app from this website.

nativefier http://bigl.es

This will trigger nativefier to make an electron app from the web site. It is then stored in a directory where the command has been run.

But...the naming scheme is a little patchy...in fact for bigl.es it calls the app..."app" so we need to fix that.

To save the app with a proper filename we do this

nativefier --name "NAME OF THE APP" <website address>

So the example changes to.

nativefier --name "bigl.es" http://bigl.es

Once the app has been created, we then need to go into the directory for the app, and in there will be the command to run it.

Run it and you have an app!

Quick Test

Screenshot-from-2018-12-11-19-11-37
I wanted to create an app for my Node-RED controlled Christmas Tree project, so I did!

Screenshot-from-2018-12-10-18-03-19
You've not seen this project? I made it last year and it enables me to change the colour of my Christmas lights, using Node-RED on a Raspberry Pi Zero W.

nativefier --name "Node-RED Christmas Tree Control" http://192.168.0.69:1880/ui/#/0

And it worked! Now I can double click on the app to control my tree!

Happy Hacking