Explore how NW.js empowers web developers to create cross-platform desktop applications using just HTML, CSS, and JavaScript—bridging the gap between web and native app development.
NW.js (https://nwjs.io/) is an open-source framework for creating desktop applications in HTML, CSS, and JavaScript and was developed by Intel in 2011. The idea of NW.js is to combine the Node.js JavaScript runtime environment with the WebKit browser engine (the framework’s original name was node-webkit) and make it available in a platform-independent way.
By combining WebKit and Node.js, NW.js is able, on the one hand, to display applications implemented in HTML, CSS, and JavaScript within a desktop window (which is possible through WebKit) and, on the other hand, to interact with the underlying operating system—that is, to use native functionalities (which in turn is possible through Node.js).
Simply put, NW.js allows web developers who "only" know HTML, CSS, and JavaScript to also implement desktop applications. And the whole thing even works cross-platform because NW.js takes care of generating the appropriate application files for the various operating systems—Windows, Linux, and macOS—based on a single code base in the languages mentioned (more on that later).
Installing and Creating an Application
The installation of NW.js is quite simple: on the project's website, you’ll find corresponding installation files for all operating systems. For developing NW.js-based applications, you need to download the software development kit (SDK) version.
A minimal NW.js application consists of two to three files: a configuration file, an HTML file that is the entry point of the application, and usually at least one JavaScript file that contains the logic of the application. Let's take a quick look at what these three files look like for the sample application.
The package.json configuration file (also known as the manifest file) is used to manage general metadata about the application, such as the name, the version number, the specification of the file that is the entry point for the application, and external dependencies, just like for Node.js packages.
The name, version, and entry point are also the minimum requirements for a package. json file for NW.js applications. The combination of the name and version properties serves as an identifier for the application; the main property specifies which HTML file is loaded initially.
So a minimal configuration file for an application named helloworld in version 1.0.0, where the index.html file marks the entry point, looks like the content below.
{
"name": "helloworld",
"version": "1.0.0",
"main": "index.html"
}
The next listing shows the content of the corresponding HTML file. As you can see, this is normal HTML. The logic, in turn, is sensibly outsourced to a separate JavaScript file (more on that in a moment).
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<div>
Your operating system is: <span id="platform"></span>
</div>
<script type="text/javascript" src="./scripts/main.js"></script>
</body>
</html>
NW.js provides its API via a global object, nw, which can be used to create UI components such as context menus or the like. The DOM API and the various Node.js APIs, on the other hand, can be accessed directly. The following code shows a combination of the latter two. Here, on the document object (DOM API), an event listener for the DOMContentLoaded event is registered, in which the information about the platform used is then read via the os Node.js module (Node.js API) and this information is then written to the element with the platform ID (again using the DOM API).
const os = require(‘os’);
// Register event listener (DOM API)
document.addEventListener(‘DOMContentLoaded’, () => {
// Read information about the operating system (or platform) (Node.js API)
const platform = os.platform();
// Write information to the DOM tree (DOM API)
document.getElementById(‘platform’).textContent = platform;
});
Note: Within an NW.js application, you can use the entire DOM API and the entire Node.js API (plus additional libraries and packages, of course). Furthermore, NW.js extends the DOM API and the Node.js API with some added features—for example, additional properties for text input fields or additional properties for the process object.
Starting the Application
To run the application shown above in the previous listings, you need the SDK for NW.js, which was installed at the beginning of this chapter. Then, on the command line, go to the root directory of the project and run the command <NWJS_TOOLS> ., where the <NWJS_TOOLS> placeholder varies from operating system to operating system as shown below.
# For Windows
/path/to/nwjs/nw.exe .
# For Linux
/path/to/nwjs/nw .
# For macOS
/path/to/nwjs/nwjs.app/Contents/MacOS/nwjs .
After launching, the application should look like the figure below. Because we started the application in macOS, the screenshot shows the value darwin. If you use a different operating system, you will of course see a different value here.
Packaging of the Application
For packaging NW.js applications—that is, the "packaging" of source code files into an
executable file—the nwjs-builder-phoenix package (https://github.com/evshiron/nwjsbuilder-phoenix) is a good choice. It can be installed as a development dependency via the npm install nwjs-builder-phoenix --save-dev command, after which it will show up accordingly in the package.json file under the devDependencies section.
{
"name": "helloworld",
"version": "1.0.0",
"main": "index.html",
"devDependencies": {
"nwjs-builder-phoenix": "^1.15.0"
}
}
In order to "package" the project for the different operating systems, you also need two more entries in this configuration file (see the next set of code below): First, you need to configure which version of NW.js to use via the build section. Then, it’s helpful to add a corresponding entry under scripts for the rather long build command for packaging the application. This way, you can call the build process using the much shorter npm run dist command. You specify which platforms you want to package the application for using the -tasks parameter. In the example, a total of three packages are generated in this way: one for Windows, one for Linux, and one for macOS (each in the 64-bit variant).
{
"name": "helloworld",
"version": "1.0.0",
"main": "index.html",
"scripts": {
"dist": "build --tasks win-x64,linux-x64,mac-x64 --mirror
https://dl.nwjs.io/ .",
},
"devDependencies": {
"nwjs-builder-phoenix": "^1.15.0"
},
"build": {
"nwVersion": "0.14.7"
}
}
More Sample Applications
The sample application shown in the previous sections is obviously very simple. In principle, of course, you can give free rein to your knowledge of HTML, CSS, JavaScript, and Node.js to implement amazing desktop applications. A few inspirations to show what’s possible with NW.js are listed in this table.
Editor’s note: This post has been adapted from a section of the book JavaScript: The Comprehensive Guide by Philip Ackermann.
Comments