How to create a desktop app version of a website using NW.js?

Question

I've been using Fluid App (OS X) in the past to create standalone desktop apps of specific web apps I want separated from the browser, have their own dock icon, and not have any of the regular browser fluff (toolbar, address bar, etc.). Fluid app, though, has been neglected for a long time and certain newer web apps (e.g. Inbox from Google) completely fail to load in it.

So I'm looking for a simple way to create a desktop app that will have a single window loading a single website, and I think that NW.js would be ideal for that.

What should be the configuration process for building such a simple desktop app for just a webview for a given URL, using NW.js?

Answer 1

If you simply want to open a single webpage in a NW.js program, it is exceptionally easy.

First make sure you read: https://github.com/nwjs/nw.js/wiki/How-to-run-apps

Especially the MacOS section.

Make a directory your_project/

create a file in your_project/package.json

Then configure package.json:

{
  "main": "https://github.com",
  "name": "github app",
  "description": "Github demo app",
  "version": "0.1.0",
  "keywords": [ "demo", "node-webkit" ],
  "nodejs": false,
  "window": {
    "title": "Github",
    "icon": "logo.png",
    "toolbar": false,
    "frame": true,
    "width": 1024,
    "height": 768,
    "position": "mouse",
    "min_width": 400,
    "min_height": 200
  },
  "webkit": {
    "plugin": true
  }
}

You can run nwjs from the nwjs.app/Contents/MacOS/nwjs path_to_your_project

Note the "nodejs": false option this disables the nodeapi for the application, if you end up needing nodejs in part of your application make sure what whatever webview you use had nodejs disabled as this is a major security flaw, do your research - do it right.

Also note that nothing is preventing the user to access content from other domains in the above example.

You will eventually want to look at packaging your application, which is also quite simple: https://github.com/nwjs/nw.js/wiki/how-to-package-and-distribute-your-apps