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

J.S. Leonard
InstructorJ.S. Leonard
Share this video with your friends

Social Share Links

Send Tweet
Published 9 years ago
Updated 5 years ago

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. :)

[00:02] 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.

[00:34] 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.

[00:51] 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.

[01:23] 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.

[01:51] 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.

[02:12] Now, we'll have a package JSON file in here that looks a little something like this.

[02:18] 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.

[02:33] 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.

[03:10] 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.

egghead
egghead
~ 6 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today