Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 998 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Your first NW.js desktop application in less than 5 minutes

3:42 JavaScript lesson by

NW.js can be an invaluable tool for building cross-platform desktop applications with javascript and html. In this lesson, we build a simple NW.js app that will act as the starting point to a much bigger application! In less than five minute, no less. :)

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

NW.js can be an invaluable tool for building cross-platform desktop applications with javascript and html. In this lesson, we build a simple NW.js app that will act as the starting point to a much bigger application! In less than five minute, no less. :)

Avatar
Adrien

Wow, it seems great !!! I love it

Do we have access to all nodejs's apis inside the app ?

In reply to egghead.io

NW.js used to be called node-webkit. Basically what it is is they've given you an instance of Chromium and a way to package Chromium onto various OSes to create cross-platform apps, and it works really well. I've had great success with it, I love it. It's not for mobile, but you can actually code sign the apps and distribute them amongst app stores, so it's really great for desktop development, especially when you want to go across OSes.

NWjs.io is the website. They have a bunch of different binaries to develop with. I'm using OS X, so I already downloaded this right here at the bottom. You get a ZIP file. You unzip the file and it gives you a binary. With that binary, we can actually create our app.

I downloaded it to my downloads directory and the ZIP directory is right here. Then once you're inside of that, with OS X you get an app file, which is actually a directory that holds the binary. That app file is actually called NWjs.app, and inside of that you get contents, and then you get Mac OS, which is a standard. This is the standard sort of thing where the apps live inside of Mac Apps. Then inside of this the binary is called NWjs.

With this, we can run it on the current directory and actually see the app in action. If we do that now, we'll find that it has an invalid package, because there's no package JSON. NW.js relies on a package JSON to know where the entry point for your app is. We're just going to go ahead and close this. What we can do is either just create a package JSON on our own or use npm-init to create one for us.

We're just going to go ahead and call this NWJS, all caps, just to make it easy. Version 1 is fine, description is fine. We're going to actually make the entry point index.html, not index.js. The rest of these I believe you can just go with the defaults. That's looking good.

Now, we'll have a package JSON file in here that looks a little something like this.

Now, if we run the app, go back up to this, you'll see that it's referencing nothing. It's not giving you an error, because there's no...It could found the package JSON, but it doesn't have anything to run. There's no app built yet.

What we can do real quick, I like to actually make a shortcut with this command here. We're going to go ahead and take this command. We're going to put it into a, just a run.sh...Actually, what am I doing? Let's echo into run.sh. We can CAT run, make sure that looks good, cool, and then we'll chmod it. So from now on, we can just run it with this script. Now we can just run that sh instead of having to type in that big string and we get our application.

From here, we want to actually see something, so we need that index.html file. We're going to go ahead and add it to the app. You can add it however you want. We'll call it index, let it sit in there. Now, we can actually do an H1 tag that says, "Hello." Save that and now we can do run. You'll see that we have our first, very basic application in less than five minutes. It's pretty cool.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?