For many years my playground was the browser… it wasn’t always a nice playground, it was full of bullies like IE7 and his older brother, the brutal IE6, but with the advent of smartphones and tablets, things started to change, albeit gradually.
lets you call all Node.js modules directly from DOM and enables a new way of writing applications with all Web technologies. It was previously known as “node-webkit” project.
NWJS runs on NodeJS and Chromium. I’m going to take a few moments to explain how to set it up, create a build process which will automatically package your app for all supported platforms (Windows, Linux and Mac OS X — 32 & 64-bit) and start developing desktop apps using your favorite frameworks and libraries.
Please keep in mind that at the time of this article, the stable version of NWJS is v0.13.2. We’re also going to need a few other things: NodeJS and Gulp.
# linux & mac
# restart all terminals and test if it's working by running
# if it works, a dummy desktop app will start
At this point you’re done with the main setup. We’ll use Gulp to handle tasks like CSS & JS minification / packaging and distribution so open a terminal and install it (globally — if you don’t have it already) by running:
npm install -g gulp
NWJS is unopinionated with regards to the frameworks and libraries you use to create the desktop app, so you can pick whatever you like. At this point I’d like to provide a link to the nwjs-boilerplate for all you impatient readers:
The boilerplate is very simple. It has a few dependencies used to package and build the app and a single HTML file (used as the entry/start point) which loads one CSS file and one JS file.
The JS file simply illustrates how to open the developer tools; F12 won’t work here unless you add that functionality into the application yourself, neither will Ctrl+Shift+I. To run the boilerplate execute the following commands in the project folder:
npm install -d # will install npm dependencies
nw . # will run the app
Don’t forget that dot at the end, it tells nw that the package.json it needs in order to run the app is in the current folder; if you don’t add it, you’ll get a default nwjs app running instead.
So let’s break the boilerplate down into its components:
Please note that at the time of this article, packaging NWJS apps built with v0.13.2 still has bugs and sometimes doesn’t work (hopefully not for long). It does however work fine with v0.12.3. You can change which version to use in package.js.
If you looked closely at package.json we have a command inside scripts called nwjs which calls gulp and node package.js. This will create a dist folder and package your app. Running it from the command line is simple:
npm run nwjs
I also have an actual project for you to look at which uses: NWJS (v0.12.x), AngularJS (1.x), SASS, Compass and NEDB to create a desktop application that manages TV shows. Hopefully this will give you a better understanding of NWJS:
Explore for yourselves, be on the lookout for new releases to nw-builder have some fun and see how far you can take it. Don’t forget that you’re developing on Chromium so there’s no need to worry about cross-browser compatibility, if it works for you, it will work for everyone. Happy coding!
Create your free account to unlock your custom reading experience.