Node Webkit – Build Desktop Apps with Node and Web Technologies

This post is part 1 of 7 in the series Node Webkit Apps
Tweet about this on TwitterShare on LinkedIn4Share on Google+18Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

Getting Started with Node Webkit apps

Looking for a real time implementation? Check : Node Webkit powered Dashboard application

In this post, we will see how to build cross OS desktop apps using Node js and Web technologies. We will take a look at building and running a simple node webkit app and then expand on it by adding different features like platform services, node modules etc.

You can find the code for the examples in this post here.

So, let us get started.

Contents

What is node webkit

node-webkit is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScript with node-webkit. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.

It’s created and developed in the Intel Open Source Technology Center.

Setting up node webkit

To build a desktop app using node webkit, we will need to get the prebuilt binaries. Then we will pass our application to the node webkit lib to run the app.

Navigate to the downloads section and pick a copy depending on your OS. Now, create a new folder named myNodeWebkitApps and unzip the download here. To keep things simple, rename the unzipped folder to nw.

Hello node webkit

Now, we will build a “hello world” app. Create another folder named helloWorld inside myNodeWebKitApps folder. The folder structure so far would be

Screen Shot 2014-07-12 at 11.13.12 am

Next, open a terminal/prompt inside the helloWorld folder and run

npm init

and fill it up like

Screen Shot 2014-07-12 at 9.30.05 pmThis will generate a standard package.json file. To run a node webkit app, you need only 2 properties

  1. main – The first file that needs to be executed when the app is launched
  2. name -The name of the package. This must be a unique, lowercase alpha-numeric name without spaces. It may include “.” or “_” or “-” characters. It is otherwise opaque.

As we have mentioned in the package.json, our starter file would be index.html. Create a new file named index.html at the root of helloWorld folder and open it up in your favorite editor. We will be displaying “Hello Node Webkit” in a header tag as the final output. Add the below code to index.html

That is all we need to run our app.

Run the application

To run the application, we need to zip (not rar or 7z) files (not the folder itself) and rename the file to app.nw.

Note : The nw app name SHOULD be in lowercase.

Back to the helloWorld folder, select the files (index.html and package.json) and zip them. Now rename the file to app.nw. The file structure inside helloWorld folder would be

Screen Shot 2014-07-12 at 12.20.19 pmIf you are on a Mac, you can navigate back to the nw folder and launch the node-webkit.app and you will see

Screen Shot 2014-07-12 at 12.22.02 pmclick on open and you will see the default welcome page. Close the app. Now if you go back to the helloWorld folder, you should see that the OS has recognized the type of the app.

Screen Shot 2014-07-12 at 12.09.31 pm
 Now, click on app.nw and you will see Screen Shot 2014-07-12 at 12.11.18 pm

If you are running on a Windows machine, you need to execute the below command. Make sure you are running the command from inside the helloWorld folder

../nw/nw.exe app.nw

and you should see

win_hw

As you can see, we have a frame and toolbar on top as it is with any browser. And if you click on the gear icon next to the address bar, the dev tools would open and you can debug the app as you would any other web page.

Simple and easy right?

Note : If you are using Sublime text for your development, you can check this to debug the apps without the hassle of zipping and renaming. But for this post, I will be manually doing all the above steps to run the app.

You can also notice that once you launch the app, it starts behaving like a desktop application. In Mac, you can see the global menu reflecting the current active app

Screen Shot 2014-07-12 at 12.38.28 pm

Some more config options

node webkit provides 2 more sets of configurations that can control the app. First we will take a look at the window object.

In our hello node webkit app, if you would like to get rid of the address bar, you can set the toolbar property to false. To test this, open up package.json and update it as

To run the app, we need to follow the same steps we did earlier again. select the files (index.html and package.json) and create a new zip file. And then rename the zip file to app.nw. Just to keep track of old changes, I will rename the older nw file as v1. The file structure would be Screen Shot 2014-07-12 at 12.45.04 pm

Now, launch app.nw and you should see

Screen Shot 2014-07-12 at 12.48.38 pmAs you must have seen by now, you can resize the window too. You can control that by setting

And also, you can notice that the window can be resized to a ridiculously small size. You can control the width/min_width/max_width and height/min_height/max_height like

You can also control the position where the app opens when launched. You can open the app in the center or at the position of the mouse. The config for that would be

You can explore more options here.

Apart from the window, we can also control webkit options too. You can select if you want to load flash/external plugins or Java applets or enable page cache. The updated package.json would look like

You can compress the files, change the extension from zip to nw and launch the app. The above settings will not have an impact on our current “Hello World” app.

Adding Native features

Menu bar

Now, we have a fair feeling that our app can function like a desktop app, lets us make it more desktop-ish. If you did notice, our hello world app has a native minimize, maximize, un-maximize and close buttons. If you want, you can get rid of those by setting frame : false  in the windows config in package.json. This will remove the buttons and the title bar. Now, you can write your own components and add event listeners to it. You can find more info on that here.

Now, we will try and add a few menu items to our app. I will add a few random menu items, to showcase the feature.

Open index.html in your favorite editor and add the below code

To build a menu, we will be using the nw.gui  module. As you can read from the name, it holds all the node webkits’s GUI modules. We will use the Menu()  to create an empty menu and using MenuItem() , we will add sub-menus to it.

We will need to write different code for Mac and Windows, so the Menu bars look native-ish.

Mac : In index.html, below the comment “menu logic goes here”, add the code

Windows : In index.html, below the comment “menu logic goes here”, add the code

Next, to enable debugging, open package.json and set {toolbar : true}. Save all the files, zip, rename and launch the app.

On Mac,

Screen Shot 2014-07-12 at 1.55.00 pm

And when you click on the menu links, you will see the alerts.

On Windows

win_hw_2

As with any menu, you can add sub menus too.

Mac : Update the script in index.html to

Windows : Update the script in index.html to

And when you save and launch the app, you should see

Screen Shot 2014-07-12 at 2.15.19 pmon Mac and on Windows

win_hw_2

If you are facing issues, you can throw in a debugger;  command in the js code. And when the app is running, you can click on the gear icon and inspect the same in dev tools.

Screen Shot 2014-07-12 at 2.24.18 pm

Simple right? You can check out Menu and Window Menu docs to get more information.

Tray

We can make our app behave like a “Tray” app (on Mac)

Screen Shot 2014-07-12 at 9.40.54 pmor Windows

win_hw_2

You can update the script in index.html with (both Mac and Windows)

You can read more about Tray apps here.

Clipboard

You can get the contents of the clipboard using the  Clipboard.get(). Add the below code to index.html after the tray setup.

And when you zip and launch the app, you should see the clipboard text alerted.

Screen Shot 2014-07-12 at 2.54.49 pm

You can read more about platform services here.

Using Node Modules

We can also leverage the power of the existing node modules to build desktop apps. For example, if you want your app to have a local persistence, you can use a node module named diskDB. This will create a local JSON file which you can manage with a MongoDB like API.

Let us build a sample settings page using diskDB and node webkit. Create a new folder inside myWebKitApps and name it diskDBApp. Open terminal/prompt here and run

npm init

Next, run

npm install diskdb --save

This will download the diskdb and required files. The final package.json would look like

Next, create a new folder named appPersistence at the root of the diskDBApp folder, where we store the JSON files locally.

Now, we create index.html file at the root of diskDBApp and open it in your favorite editor. Update the file like

The above code uses diskDB API to create a settings file and store the data. Then we will use the find()  to return all the settings and display the data. SImple and easy right?

To run the app, zip all the folders and files and rename the app as diskDBApp.nw. And when you launch the app, you will see

Screen Shot 2014-07-12 at 3.51.06 pm

win_hw_2

Very powerful right? You can use other node package as you need them.

Note : Not all node modules work well on all platforms.

Distribute the App

So far, we have zipped and ran the app locally. For the app to run, we need to have the node-webkit executable available (duh!). This is one of the ways of distributing the app, in case the end users of the app are familiar with node webkit.

Another way of distributing the app is to share your app with the nw executable. You can read more about that here.

Another option is to use node-webkit-builder. I found node-webkit-builder more reliable while generating cross platform executable. We will be leveraging Gulp to perform this task for us. At the root of the diskDBApp, create a new file named GulpFile.js and add the below contents.

Next, we will install the required dependencies. Run

npm install --save-dev gulp gulp-util node-webkit-builder

Now run

gulp nw

This will launch the build task and generate the required installer.

Screen Shot 2014-07-12 at 4.30.23 pmAfter the task is completed, you will see a new folder named build, which will consist of the installer

Screen Shot 2014-07-12 at 4.32.41 pm

Do notice the size of the app (~90 MB).

If the build is not working as expected on Windows, you can try nodebob.

First, you need to clone the nodebob repo. CD  into myNodeWebkitApps folder and run

git clone https://github.com/geo8bit/nodebob.git nodebob

Next, navigate to  myNodeWebkitApps\nodebob\app folder and delete all its contents. Now, copy only the below from myNodeWebkitApps\diskDBApp folder

  • appPersistence folder
  • node_modules folder (with only diskDB inside it)
  • index.html
  • package.json

into myNodeWebkitApps\nodebob\app folder.

Back to nodebob folder, Execute (double click) on build.bat and in a few seconds,  the build would be completed. You can navigate to myNodeWebkitApps\nodebob\release folder to see the installer generated. It will be named as nw.exe.

You can launch it and it should display the setting from the JSON file.

App Security

As you already know, we are distributing a zip file that consists of our logic and assets. There may be times, when you would like to protect your app’s logic and assets. You can achieve the same using V8 snapshots. More info here.

Hope you got a decent idea on how to build Desktop apps using Node Webkit.


Thanks for reading! Do comment.
@arvindr21

Series NavigationNode Webkit powered Dashboard application >>
Tweet about this on TwitterShare on LinkedIn4Share on Google+18Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page
  • Eliyanan

    hello guys, i am getting an error from my ide that nw.gui module is not installed how do i solve it?? please help

  • Ethan Arrowood

    Hi! I know this was created a while ago, but hopefully you will be able to respond.
    I am on a windows pc and I have successfully created an app along with making it single file executable. I want to make my app able to be executed on mac. I’m having a hard time figuring it out. I’m trying to follow your tutorial using gulp, however I’m not getting the same console response you are. It doesn’t create a build folder. Let me know if I should post any error messages or what not.

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      What is the error message?

      • Ethan Arrowood

        node-webkit-builder ERROR: The version 0.9.2 does not have a corresponding build posted at http://dl.nwjs.io/. Please choose a version from that list.
        node-webkit-builder Unable to download nodewebkit
        Both the cache and the node_modules folders are created.
        build folder is not created.

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          Replace the version in gulp file from 0.9.2 to 0.13.0. This should fix the above issue.

          • Ethan Arrowood

            Didn’t work :(

            [20:45:06] Using gulpfile ~DesktopmyNodeWebkitAppspasswordGeneratorAppgulpFile.js
            [20:45:06] Starting ‘nw’…
            [20:45:07] node-webkit-builder Using v0.13.0
            [20:45:07] node-webkit-builder Create cache folder in C:UsersEthanDesktopmyNodeWebkitAppspasswordGeneratorAppcache.13.0
            [20:45:07] node-webkit-builder Downloading: http://dl.nwjs.io/v0.13.0/nwjs-v0.13.0-osx-ia32.zip
            [20:45:07] node-webkit-builder Create cache folder in C:UsersEthanDesktopmyNodeWebkitAppspasswordGeneratorAppcache.13.0
            [20:45:07] node-webkit-builder Downloading: http://dl.nwjs.io/v0.13.0/nwjs-v0.13.0-osx-x64.zip
            [20:45:07] node-webkit-builder ERROR: The version 0.13.0 does not have a corresponding build posted at http://dl.nwjs.io/. Please choose a version from that list.
            [20:45:07] node-webkit-builder Unable to download nodewebkit.
            [20:45:07] Finished ‘nw’ after 1.32 s
            [20:45:07] node-webkit-builder ERROR: The version 0.13.0 does not have a corresponding build posted at http://dl.nwjs.io/. Please choose a version from that list.

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            Try 0.12.3

          • Ethan Arrowood

            No error’s in the console this time, but I don’t get the same output you did in the example. Instead I get a very long chain of directories and files. Is it because I’m on windows and this is for osx?

            Here is the comman line info:
            [20:51:06] Using gulpfile ~DesktopmyNodeWebkitAppspasswordGeneratorAppgulpFile.js
            [20:51:06] Starting ‘nw’…
            [20:51:07] node-webkit-builder Using v0.12.3
            [20:51:07] node-webkit-builder Create cache folder in C:UsersEthanDesktopmyNodeWebkitAppspasswordGeneratorAppcache.12.3
            [20:51:07] node-webkit-builder Downloading: http://dl.nwjs.io/v0.12.3/nwjs-v0.12.3-osx-ia32.zip
            [20:51:07] node-webkit-builder Create cache folder in C:UsersEthanDesktopmyNodeWebkitAppspasswordGeneratorAppcache.12.3
            [20:51:07] node-webkit-builder Downloading: http://dl.nwjs.io/v0.12.3/nwjs-v0.12.3-osx-x64.zip
            downloading [====================] 100% 0.0s

            [20:52:22] node-webkit-builder Create release folder in C:UsersEthanDesktopmyNodeWebkitAppspasswordGeneratorAppbuildmyapp.pwdgenapposx64
            [20:52:22] node-webkit-builder Create release folder in C:UsersEthanDesktopmyNodeWebkitAppspasswordGeneratorAppbuildmyapp.pwdgenapposx32
            [20:52:47] Finished ‘nw’ after 1.67 min

          • http://thejackalofjavascript.com/ Arvind Ravulavaru
          • Ethan Arrowood

            Ok my problem is instead of it creating an executable node-webkit.app it is creating a webkit.projectname.app directory. Any tips?

          • http://thejackalofjavascript.com/ Arvind Ravulavaru
          • Ethan Arrowood

            I can’t figure it out :( Thanks for trying to help me!

  • Ankit

    Many thanks. This is very useful for first time node web-kit programmers.

  • Vallish Kumaraswami

    Hi,
    We have built a desktop app similar to what you have described above. Now I see a nw.exe running in task manager. But, how do I automate the GUI testing for the same? Are there any tools that can detect the nw.exe type of window to recognize the controls inside the same?

    Please help.

  • Cl Sah

    Hi Arvind,
    I use ubuntu and unable to launch node webkit. How to launch node webkit? I don’t find any node-webkit.app
    after unzip nwjs-v0.13.0-alpha2-osx-x64.zip file.

  • Puneet gupta

    Hi Arvind,

    I tried to make web as desktop app using node-webkit
    when i run this command : ../nw/nw.exe app.nw
    I got this error

  • Maria Melton

    I’m having a problem with the menu: when I tried it a week ago it worked fine, now when I copied and pasted the code into index.html I get this error. I’m not sure what it means. I attached the terminal output in the photo below.

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Can you try downloading the OSX libs again? May be they have been updated.

  • Maria Melton

    I’m using OSX, this is not working, I followed the directions and when I click on app.nw it just opens the default welcome page again. What do I do?

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Hey Maria, Once you have downloaded the libs can you copy the nw.app from the libs folder to the Applications folder of Mac and then try?

      • Harish Jambhale

        I am having the same issue. I tried copying nwjs.app to applications folder, and still the issue persists.

  • Pudjo Isnanto

    can it deployed on web?

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      What do you mean?

      • Maria Melton

        Yes, I figured it out, I wasn’t using npm to get node webkit so node webkit wasn’t recognized, and even then an alias had to be created to access it. Thanks for getting back to me!!!

    • Maria Melton

      Yes, I figured it out, I wasn’t using npm to get node webkit so node webkit wasn’t recognized, and even then an alias had to be created to access it. Thanks for getting back to me!

  • Aragorn

    Thank you, this should get me started for sure.
    I have a noob question, does this diskdb a temporary persistence. Like while the app is running data is available and lost when app is closed?
    When I tried diskDBApp, json file got created in ../../Temp folder in Windows. I tested by making some changes to the save part, app was not finding the data upon re-launch. I could not figure out how to save the app data permanently.

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Hello Aragorn. Thanks. DiskDB is an JSON based file storage that I have written to manage simple persistent file based storage.

      To get an understanding of DiskDB, check out : http://thejackalofjavascript.com/building-todo-app-diskdb/

      Thanks.

  • Liesl van Wyk

    Can I send you my file?

  • Liesl van Wyk

    OK – I have loaded my very basic app – into the ” Hello Node” index file. And tried to launch it – do I need to change anything in the json file?

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      You can follow the tutorial from there on. That should help.

  • Liesl van Wyk

    Yes it did – thanks a lot!

  • Liesl van Wyk

    Thanks – Hate you for being so javascript-cute!!

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      No problem. Did the solution work?

  • Liesl van Wyk

    Hi Arvind – OK. Can you take me through it:

    1. I have Yosemite

    2. I have node -v 12.0

    3. I have newest node webkit : Mac 10.7 + /64bit
    I create a “hello world’ folder, as well as a nw. folder
    I created the json file exactly as you said.
    I created the index.html file exactly as copied form this site.
    Then in that same folder (the Hello world folder- I compressed the Index and json file and renamed it app.nw.
    I then took the node webkit folder (after I unzipped it) and pasted into the nw folder
    By now nothing is like you say on your site – the app.nw recognises itself before I open the node-webkit (or now the nwjs file)
    What am I doing wrong – it should not be as difficult as this – PLEASE HELP.

    Regards

    Mac 10.7+: 32bit / 64bit

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Hello Liesl, Follow the below.

      1. Unzip the node-webkit zip file and copy the nwjs.app to your applications folder
      2. Double click the app.nw file you have created.

      This should open your app using the nwjs.app from applications folder.

  • Liesl van Wyk

    Does not even work if you use the Sublime method. Can someone please update this – there is some serious issues with having this work on Yosemite – Newest Version Node – Newest Version Webkit

  • Liesl van Wyk

    HI I have a problem making the app launch. I am using Yosemite -Node.js 10.22 and nodewebkit. You are giving the sulotion down here by using this: Step 1 : Open sublime text, next go to Tools build system and New build system

    Step 2 : Copy paste the below code inside it and save it in the default location as node-webkit.sublime-build

    {
    “cmd”: [“node-webkit”, “–enable-logging”, “${project_path:${file_path}}”],
    “working_dir”: “${project_path:${file_path}}”,
    “path”: “/Applications/node-webkit.app/Contents/MacOS/”
    }

    The default path would be
    /Users/{{username}}/Library/Application Support/Sublime Text 3/Packages/User/node-webkit.sublime-build

    Step 3 : Download the latest version of node-webkit, unzip it.
    Step 4 : Go to Applications folder and delete node-webkit.app if it already exists
    Step 5 : Paste the fresh copy of node-webkit.app from the downloaded folder here.

    Do you have a better solution yet – for people who want to use Yosemite, newest node-webkit as well as newest node.js.
    Can you also give a solution if I do not want to use sublime tet.

    Regards

  • Anuj

    Is the file an executable file, .exe in windows? Can we execute DOS commands from javascript. That is I want to take screen shot of entire screen. Can this command is executable through javascript ?

  • http://lallouslab.net/ Mad Scientist

    Well written. Thank you.

  • CK

    Hi,

    Do anyone have any solution for video player in nodewebkit desktop app

    Thanks
    CK

  • Oluwaseun Ladeinde

    I must have missed something. You said, “To run the application, we need to zip (not rar or 7z) files (not the folder itself) and rename the file to app.nw.” Which files are you referring to?

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      The files inside the folder. index.html and package.json.

  • http://thejackalofjavascript.com/ Arvind Ravulavaru

    Hi Martin, Do you have a web page where I can see this issues or any code? I can take a look. — Thanks.

    • Martin McNeela

      I will setup a super-simple test code, and post a link for you.

      • http://thejackalofjavascript.com/ Arvind Ravulavaru

        That will help. Thanks!

    • Martin McNeela

      Hi Arvind, here is a link the the .nw file, if you put this in you you node webkit folder and run it you can see the issue: https://www.dropbox.com/s/9h53kyyidi4qslr/test.nw?dl=0

      I didn’t want to package it as an exe so you can see what is happening.

      • http://thejackalofjavascript.com/ Arvind Ravulavaru

        Hello Martin, Thanks.

        Since the 2 pages just have links, they seem to work fine. I do not see any lag. May be the pages you are loading are more heavy in terms of media contents and they are taking time to unload.

        Also, is this issues specific to windows alone?

        I do not know, if this is the right way to solve it, but you can add an overlay when a user clicks on a navigation link and on page load complete, you can hide it.

        Thanks.

  • llimpeo

    Thank you.

    C:myNodeWebkitAppsdiskDBAppnode_modules.bin>gulp nw
    [13:44:58] Working directory changed to C:myNodeWebkitAppsdiskDBApp
    [13:45:03] Using gulpfile C:myNodeWebkitAppsdiskDBAppGulpFile.js
    [13:45:03] Starting ‘nw’…
    [13:45:05] node-webkit-builder Using v0.9.2
    [13:45:05] node-webkit-builder Create cache folder in C:myNodeWebkitAppsdiskDB
    Appcache.9.2
    [13:45:05] node-webkit-builder Downloading: http://dl.node-webkit.org/v0.9.2/nod
    e-webkit-v0.9.2-win-ia32.zip
    [13:45:12] node-webkit-builder Recieved status code 403: Forbidden
    [13:45:12] node-webkit-builder Unable to download nodewebkit.
    [13:45:12] Finished ‘nw’ after 9.59 s

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Try Nodebob

  • llimpeo

    Hi.
    Great guia.
    in this section.
    Now run

    gulp nw

    in windows, I execute this stament “gulp nw” ..?

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Thanks llimpeo. Yes the command is same for Windows too.

  • Esneyder Amin.

    gracias fue muy informativo

  • Pim

    Great and clear article, thank you!

  • kr1

    Hi, when I do click on app.nw, it always execute nw:blank and I don´t see the html

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Hello kr1, can you please share the folder structure?
      Thanks.

      • Pooja.P

        Hello!
        I have the same problem too. It is showing the default home page when clicked. Please help!

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          Hello Pooja,

          Is the main field in package.json pointing to index.html in the current folder?

          Thanks.

          • Pooja.P

            Hey!
            Yes it is.

            Thanks.

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            Hey! Okay, let’s try one thing quickly. Launch the node-webkit.app present inside the nw folder. This will give you a warning, click open.

            Once you close the above generated window, navigate to your applications folder and check if a copy of this app is (automatically) saved there.

            If it is, you can lauch any nw app and it should open up fine.

            PS : from the screen captures, looks like you are using Yosemite. I have not tested nwk on it yet but it should work as expected.

          • Pooja.P

            Yes I am using Yosemite. I have already passed that warning by clicking the node-webkit.app. Now it just opens the default window when I open it. But I see that there is no copy of that app in the applications.
            Please help!

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            Hey, can you try from command line? From the hello world folder run,

          • Pooja.P

            I tried it. It says No such directory :(

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            The command should be

            There should be a ./ before the command and since you are running from inside the hello world folder, you should navigate one level up before going to the nw folder.

            Thanks.

          • Pooja.P

            hey!
            I figured out the problem. It was the problem with the latest version of Nwk (v0.11.0-rc1). it works fine now when I have installed nwk version 0.8.6 with node.js version (v0.10.33).
            Thanks a lot for the help!

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            Glad you figured it out. Thanks for sharing.

          • M. Abel

            Hi Arvind,

            The problem seems to be more widespread. Neither the old version that worked for Pooja or the latest version is working for me on Mavericks (10.9.5). I have the same problem…

            Launching the diskDBApp.nw file from the Finder just brings up the blank: screen. Same if I use “open diskDBApp.nw” from the command line.

            I don’t think the command “./../nw/node-webkit.app app.nw” will work. That is just a directory. You must use “open” on Mac OS X to launch apps. Indeed…

            $ ./../nw/node-webkit.app diskDBApp.nw
            -bash: ./../nw/node-webkit.app: is a directory

            I’ve tried copying the node-webkit.app application into the Applications directory. And while it shows up in the Launchpad screen and can be run from Finder, it just shows the blank: screen. And when clicking on the diskDBApp.nw zip archive, the same as before. Just the blank: page.

            The only way I can get it to launch is by moving the diskDBApp directory tree (not the zip archive) into the node-webkit app package contents…

            $ mv diskDBApp node-webkit.app/Contents/Resources/app.nw

            Making a symbolic link provides easier access to the application files while working on the app:

            $ ln -s node-webkit.app/Contents/Resources/app.nw nwkapp
            $ cd nwkapp

            This all works with the latest stable version:

            v0.10.5: (Sep 16, 2014, based off of Node v0.11.13, Chromium 35.0.1916.157)

            The rest of the app packaging instructions work fine (edit the Info.plist to change app name, add icns file). But for rapid development, this can work until the zip feature is repaired on Mac OS X.

            Would welcome your feedback if I’ve just missed something obvious that is preventing the zip archives from launching directly.

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            @m_abel:disqus Thanks for sharing, yes it looks like an issue with v 0.10.5. I had faced the same issue now. Thanks @pooja for bringing it up I thought it was a machine specific issue.

            PS : This happens on Mac OS only. Here is the simplest way to run the app during development.

            We will be using the sublime text plugin : https://github.com/rogerwang/node-webkit/wiki/Debugging-with-Sublime-Text-2-and-3

            Step 1 : Open sublime text, next go to Tools build system and New build system
            Step 2 : Copy paste the below code inside it and save it in the default location as node-webkit.sublime-build

            The default path would be
            /Users/{{username}}/Library/Application Support/Sublime Text 3/Packages/User/node-webkit.sublime-build

            Step 3 : Download the latest version of node-webkit, unzip it.
            Step 4 : Go to Applications folder and delete node-webkit.app if it already exists
            Step 5 : Paste the fresh copy of node-webkit.app from the downloaded folder here.

            Now, open your helloWorld project inside sublime text. And then go to Tools > Build System and select node-webkit as default build system.

            After that you can either run Tools > Build to launch the app or Press command + B

            And your app should launch with your contents.

            Note : You can run build on any file inside your project that is at the same level as package.json. Build will not work if it is run from inside any other folder.

            Thanks.

          • Patrick Lemiuex

            If a user doesn’t have node or nodewebkit, if I package an app, will it include all the dependencies to run the app?

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            Yes, it does.

          • Vimal Raj

            In MacOS, the executable binary is in a hidden directory within the .app file. To run node-webkit on OSX, type:./../nw/node-webkit.app/Contents/MacOS/node-webkit app.nw

          • http://thejackalofjavascript.com/ Arvind Ravulavaru

            Thanks for sharing!

          • Harish Jambhale

            I tried with belwo command, but not working:
            ./../nw/nwjs.app app.nw

            It gives following message:
            -bash: ./../nw/nwjs.app: is a directory

  • TurboJones

    If the menu bar is not showing reference this:

    https://github.com/rogerwang/node-webkit/wiki/Menu#menucreatemacbuiltinappname

    I had to add the createMacBuiltin call to make the tutorial work.

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Thanks for sharing @TurboJones

  • YdnasErriep

    hi great material !! you have a typo error here:

    db.connect(‘appPersistence‘, [‘settings’]);

    i think you mean db.connect(‘appPersistence’, [‘settings’]);

    peace

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Fixed it. Thanks @YdnasErriep:disqus

  • Guest

    i try your script but i ‘ve got this error

    Uncaught node.js Error
    TypeError: Cannot read property ‘count’ of undefined
    at file:///tmp/.org.chromium.Chromium.9S0bnd/index.html:32:22

    seems that the count() call dreate a bug!??

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Hello there, Are the remaining functionalities working fine? Have you checked if

      executed fine?

      Thanks.

  • Madhawa Umanga Kariyawasam

    hi, i developed a web as a desktop app using Node web kit but the thing is quit button and print button not work properly after convert., I searched what wrong applied but I couldn’t find. can any one help

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Hello Madhawa, Can you pls share the code repo or the actual issue?

  • Madhawa Umanga Kariyawasam

    thank you.. it’s very useful for developers !

  • http://www.ifeenan.com/ feenan

    it’s very good,tks!