/

Creating a Desktop App with node-webkit

Creating a Desktop App with node-webkit

In this blog post, I will provide an overview of how to use node-webkit to package and deploy a web application for Mac and Windows. Please note that this post may not reflect the latest advancements in this technology.

Before diving into the details, I want to clarify that this post will focus on packaging a web app to run on Mac and Windows, excluding Linux.

node-webkit, named by its creators, is a web runtime based on Chromium and node.js. It allows us to directly call node.js code and modules from the DOM, opening up new possibilities for building native applications using web technologies.

To get started, create an index.html file with the following content:

1
2
3
4
5
<html>
 <body>
  <p>test</p>
 </body>
</html>

In addition, create a package.json file with the following content:

1
2
3
4
{
 "name": "My Web App",
 "main": "index.html"
}

That’s all you need in terms of code!

To run the app, first, download the runtime for your specific platform from the node-webkit GitHub repository. Then, you can run the app by following one of the two methods below:

Method 1:

Create an alias to open the node-webkit application with the app directory path:

1
2
$ alias nw="open -n -a node-webkit '/PATH_TO_APP_DIRECTORY/'
$ ./nw

Method 2:

Navigate to the app directory and zip its contents:

1
2
cd /PATH_TO_APP_DIRECTORY/
zip -r app.nw ./

You have now created a package for your app. On Mac, you can double-click it to run, while on Windows, you can drag it over the node-webkit application.

Once your app is packaged, you can add various options to the package.json file. For more details on available options, refer to the node-webkit Manifest Format documentation.

Now, let’s discuss the process of packaging and distributing an app on both Mac and Windows.

Packaging the App on Mac

Follow the steps below to package your app on Mac:

  1. Unzip the node-webkit.app package that you downloaded from the node-webkit site.
  2. Right-click on the package and select “Show package content”.
  3. Navigate to Contents/Resources and copy the app.nw file that you built using the command $ zip -r app.nw ./.
    Alternatively, you can copy the entire app directory and name it “app.nw”.
  4. That’s it! You can now customize the default icon and properties in the Contents/Info.plist file to meet your app’s requirements.

Packaging the App on Windows

To package your app on Windows, follow these steps:

  1. Download the latest Windows package of node-webkit.
  2. Copy the .nw file (built using Zip) into the package directory, alongside nw.exe, and name it app.nw.
  3. Run the command copy /b nw.exe+app.nw app.exe.
  4. You can now remove the nw.exe and app.nw files, zip the directory, and distribute the package to your users. They can download the zip file, extract its contents, and run the app.exe file.

Now you have a basic understanding of how to use node-webkit to create a desktop app. Remember to explore the available options in the package.json file to customize your app further.

Tags: node-webkit, desktop app, packaging, web runtime