Desktop build using node-webkit & grunt-node-webkit-builder

desktop-build-steps.md

Desktop build using node-webkit & grunt-node-webkit-builder:

First download node-webkit for your platform(Not the target platform, the working machine's platform). With node-webkit we can package static webpages into native applications. This can be done for all three desktop platforms.

https://github.com/rogerwang/node-webkit

After downloading place the static website inside a folder along with a package.json file. This package.json is not to be confused with node packages json file. The package.json is used to define the specifications of the app such as title, width and height. Here is a sample:

{
  "name": "celeb4me",
  "main": "index.html",
  "window": {
    "toolbar": false,
    "resizable": true,
    "width": 800,
    "height": 600
  }
}

Once done zip the static site along with package.json into app_name.nw package. Use the following command if you are using linux:

zip -r app.nw *

Now node-webkit will consist of an executable nw. If you running on linux cd into the dowloaded folder and run nw [path_to_app_name_package]/app_name.nw.. This will open the app as a native application with the title specified and width and height according to package.json.

For other platforms please refer the Github page shared above on running the application.

Packaging and Exporting the app:

Now that we are able to run the app from command, we haven't got an executable from it. To generate an executable we can use Grunt node webkit builder https://github.com/mllrsohn/grunt-node-webkit-builder.

npm install grunt-node-webkit-builder --save-dev

After installing grunt node webkit builder write a gruntfile with the platform specifications and app content specifications.

module.exports = function(grunt) {

  grunt.initConfig({
    nodewebkit: {
      options: {
        build_dir: 'build', // Where the build version of my node-webkit app is saved
        mac: true, // We want to build it for mac
        win: true, // We want to build it for win
        linux32: false, // We don't need linux32
        linux64: false, // We don't need linux64
      },
      src: 'public/**/*' // Your node-webkit app
    },
  });

  grunt.loadNpmTasks('grunt-node-webkit-builder');
  grunt.registerTask('default', ['nodewebkit']);

};

Now modify src: in the above sample and point it to your app's folder. Then run grunt --force which will fetch the platform specific dependencies and store it in build/cache and then generate the app inside releases/app_name/platform_name/app_name. You can find the executable inside that. Copy the whole folder and not just the .exe file.