It’s been an exciting few years for ; new devices and technologies are pushing the boundaries of what we thought we could do with the language. JavaScript 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. After a while it started getting interesting. We went from , to mobile browser, to hybrid applications, to native applications, to backend, to cloud collaboration tools, to robotics and desktop applications browser …all with JavaScript! But I digress, getting back to the matter at hand… after researching the topic of JavaScript desktop applications a bit and going through a few frameworks I stumbled upon which in their own words: nwjs.io lets you call all directly from DOM and enables a new way of writing applications with all Web technologies. It was previously known as “node-webkit” project. Node.js modules 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. Download and install and (SDK version) NodeJS NWJS Once NodeJS is installed, you’ll also have access to NPM (node package manager) which is a command line tool that comes bundled with NodeJS. Test if everything works by running and in a terminal. node -v npm -v If you’re on a Mac that has OSX 10.11 El Capitan you might experience a strange behavior where works but doesn’t. Read … it should help. node npm this article You might have noticed that NWJS doesn’t have an installer… that’s OK, just unzip that archive to a location of your choice and add it your system PATH so you can access the binary globally. To do that open a terminal and run one of the following commands ( ): nw make sure you don’t misspell it and enter the correct path to the nwjs folder! set PATH=%PATH%;X:\path\to\nwjs\ # windows PATH=$PATH:~/path/to/nwjs # linux & mac nw # 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 for all you impatient readers: nwjs-boilerplate _nwjs-boilerplate - Boilerplate setup for nwjs desktop apps_github.com raduGaspar/nwjs-boilerplate 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 dependenciesnw . # will run the app Don’t forget that dot at the end, it tells that the it needs in order to run the app is in the current folder; if you don’t add it, you’ll get a default app running instead. nw package.json nwjs So let’s break the boilerplate down into its components: — this can be generated by running and it’s usually found in applications that make use of . In NWJS it has another function: you use it to define application specific parameters like the: window size, application icon, transparency, toolbar, title, position and many others as well as the application entry/start point… in our case that would be . package.json npm init npm main: index.html the in are needed for the tasks defined in . devDependencies package.json gulpfile.js — used to define tasks and automation; in our case we use gulp to read the file and find all CSS and JS files it loads. We then merge and minify/uglify all CSS and JS files, generate a new which loads the resulting CSS and JS assets, create a folder which holds all of the files we just created as well as any (we don’t have any in the boilerplate) and the original needed by to run. gulpfile.js index.html index.html dist npm dependencies package.json nw —uses (a developer dependency npm package) to read all of the files in the folder and release the application for all operating systems we defined in the array. As you can see we’re only targeting x64 platforms, but you can add x32 if that’s a requirement. package.js nw-builder dist platforms 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 we have a command inside scripts called which calls and . This will create a dist folder and package your app. Running it from the command line is simple: package.json nwjs gulp node package.js 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: _nwjs-show-tracker - A simple interface for tracking tv shows._github.com raduGaspar/nwjs-show-tracker 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!

Keep

Mind

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

JavaScript: Desktop Applications with NWJS

Too Long; Didn't Read

Companies Mentioned

Radu B. Gaspar

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

JavaScript: Desktop Applications with NWJS

Too Long; Didn't Read

Companies Mentioned

Radu B. Gaspar

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES