Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Getting Set Up With “node-webkit” (Mac only)
4501
single,single-post,postid-4501,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive

Getting Set Up With “node-webkit” (Mac only)

Node-webkit allows you to write native apps for Windows, Mac, and Linux using HTML, CSS, and JavaScript. Such a prospect is very exciting and opens up a lot of interesting doors for web developers wanting to try their hand at a desktop app. Node-webkit is really easy to set up (at least on Mac, which is all I’ll be covering here). It took me about 20 minutes to get an “application” up and running. I put that in quotes because it wasn’t much more than a few HTML tags, but watching it launch was something I’ve only imagined for a long time!

Again, it’s super simple  to get a (very basic) app running. To get started, download the necessary binaries from the project’s GitHub page and unzip the package. Copy the “node-webkit” app, create a folder for your project and paste the app inside of it. Now create another folder called “app” there as well with these files in it:

“index.html”:

<!DOCTYPE html>
<html>
  <head>
    <title>App Name</title>
  </head>
  <body>
  </body>
</html>

“package.json”:

{
  "name" : "Name of Your App",
  "main" : "index.html"
}

Test Your App

Now all we have to do is package up the files with a simple command:

$ zip -r app.nw *

Or you can select specific files with a space separated list:

$ zip -r app.nw index.html package.json

If I haven’t missed anything important (let’s not cross our fingers), if nothing’s changed with node-webkit, and if you haven’t messed up, there should be an a new item in your project’s folder… your app! Double click it and watch your HTML open. It’s pretty cool but it just looks a lot like a web page in a web browser. If you’re as excited about creating an app from a webpage as I was, this will ruin the moment a little bit for you. Luckily it isn’t hard to get yourself a nice blank and borderless canvas to work with. A small adjustment to your “package.json” file is all it takes.

Remove the chrome from the browser and size the window.

{
  "name" : "Name of Your App",
  "main" : "index.html",
  "window" :
  {
    "width" : 1100,
    "height" : 900,
    "frame": false
  }
}

You can set a custom icon (after packaging the app up for delivery):

There are numerous ways to make the “.icns” needed to set your app’s icon. The easiest way may be to create it from a “.png”. A quick google for “png to icns” should give you all you need. Before you can use that, though, you have to package up everything for delivery.

Copy the “app.nw” file you created, right click on the “node-webkit” app you pasted earlier, and choose “Show Package Contents”. Inside “Contents>Resources” paste “app.nw” to override the one that’s already there. You can also replace the icon file if you created your own as well. Now, back up a level in “Contents”, you can edit the “Info.plist” file to your needs. One field you may want to specifically change is called “CFBundleName”; this will change the name of your app as it appears in the menu bar.

Now your app is all packaged up and ready to deliver. With this tool, you can start building apps just like you build web pages. The project has a great wiki page with a lot more tips and tricks on how to use node-webkit.

To those who know basic web development and have wanted to develop desktop apps but haven’t, for whatever reasons, learned a native languages, such a system should feel liberating. Happy app making!