Nwjs

Over the past year, JavaScript has experienced a tremendous increase in versatility due in large part to the Node interpreter, which allows JavaScript to run locally. In this post, I’ll talk about Nw.js, which is a framework for building and compiling native desktop applications using JavaScript, CSS, and HTML, and is powered by Node. I’ll start with the UI of a simple file monitoring application that I am working on, followed by the JavaScript logic, and finally I’ll explain how to package the application for distribution with Node.

The first thing that needs done is to build a package.json file in the root of the project. This can be done manually or by using `npm init`. If `npm init` is used, Nw.js-specific objects will have to be added manually. The most basic requirements for the package.json file are a main key and name key. Main points to the location of the index.html file, while name is the name of your project; this is the object that will have to be added if `npm init` is used to build the package.json file.


{
  “name”: “projectName”,
  “main” : “index.html”
}
  
  

It is possible to customize the window in which the application opens by adding a window key / object to the package.json file as well. Some of the options for window customization are height / width, min / max height / width, resizable, title, and more; for a full list of options, see http://docs.nwjs.io/en/latest/References/Manifest%20Format/#window-subfields.


“window”:{
  “height”:500,
  “max-width”:500,
  …
}
  
  

The UI is built using HTML and CSS, and only a few things are different from standard Web HTML to NW.js HTML. The differences are input type=’file’, iframes, and webview tags. In this application, the input tag was used to obtain files and their path for monitoring (the different way of handling input in this case will be discussed later). Cdns can be used to provide resources, such as the JQuery cdn used here. JavaScript files can be required or put inside script tags. Here is the structure of the UI for the file monitoring application. It allows the user to add a new file to be watched and view the list of currently watched files.



  
  File Monitor

  
  


  

Monitor files

    For this application, there are a couple of key elements that needed to be achieved: 1) listening for button clicks; 2) adding elements to the DOM as things change; 3) retrieving data from the file input; and 4) persisting data across sessions. Registering click handlers for Nw.js is the same as a doing registering handlers for the Web. Retrieve the node that to listen to and that use addEventListener to add the event and the handler function.

       
    function bindSelectFileClick() {
      let button = document.querySelector('#select_file')
      button.addEventListener('click', function() {
        openFileDialog();
      })
    }
      
      

    Adding elements to the ‘DOM’ in Nw.js is also very much the same as adding them via the Web. Obtain a handle to the node where HTML will be added, and then build the element and overwrite or append or insert the element.

    
    var html = '
  • ' + '
    '+ '
    ' + name + '
    ' + '' + '
  • '; $('#fileList').append(html)

    Now for the handling file input. Standard Web html does not retrieve the full file path for security reasons. This is not the case for NW.js; since the application runs locally, the full path is accessible to the application via the value property. This can be used to read the file, or in my case, stored in order to maintain a link to the file for monitoring. NW.js also adds path property to input and several attributes such as nwdirectory and nwsaveas. For a full distription and list of changes to the DOM, see http://docs.nwjs.io/en/latest/References/Changes%20to%20DOM/. var inputField = document.querySelector('#fileSelector'); var filePath = this.value;

    For this application, I used an npm package call diskDb which stores json in a file in order persist data. It is simple to use and worked well for this application. DiskDb and other packages can be required in JavaScript this standard way: var db = require(‘diskdb’). After the module is required, connecting to the db is done by db.connect(dirName, [fileName]). DirName refers to the directory where the json file is stored, and fileName refers to the json file. DiskDb can create the file or you can create it; if created manually, the file must contain an empty array. How the database is structured is very open.I created an object that has a title and an array of files. In this application, I used the find function to retrieve the array and the update function to update the file with new data.

    In order to package and build the application, the nw-builder must be installed via npm. Once that is install globally running the command nw-build -p [list of OS’s] directory. Run this command from the parent directory of the project. Once that command is finished, it will produce a build directory with a subdirectory of the project that contains apps for all the OS’s that were listed out. All the code for this project can be found on my github at github.com/johndrkurtcom/fileMonitor. Thanks for reading!

    Share This