Hello World Desktop App with Node.js

by AJ Meyghani

Hello node-webkit

With node-webkit, you can create desktop applications with CSS/HTML/JS and more importantly take advantage of node modules directly inside the html.

In this post we are going to create a basic hello world binary application for OSX64.

Step 1: Create a folder on your desktop and call it webkite-example:

cd ~/Desktop && mkdir webkite-example && cd $_

Step 2: Create two files, index.html and package.json:

touch index.html && touch package.json

Step 3: Add the following to the package.json file:

{
  "name": "hello",
  "version": "0.1",
  "main": "index.html",
  "window": {
    "toolbar": false,
    "width": 800,
    "height": 600
  },
  "devDependencies": {
    "markdown": "^0.5.0"
  }
}

Step 4: Add the following to the index.html file (basic html file)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>

Step 5: Install the markdown module for this project:

npm install markdown --save-dev

Step 6: Add the following lines in the body of index.html:

<script>
	var markdown = require('markdown').markdown;
	document.write(markdown.toHTML("Hello **World**!"));
</script>

So your final index.html will look like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    var markdown = require('markdown').markdown;
    document.write(markdown.toHTML("Hello **World**!"));
  </script>
</body>
</html>

This is the most basic set up that you need to be able to run the app. In the next section we will learn how to run the app and package it up.

Running and packaging the app

We are going to use a node module called node-webkit-builder to do the heavy lifting. To continue, you will need brew installed if you are on a mac or if you are having trouble running the module.

Step 1: Install the nwbuild globally:

npm install node-webkit-builder -g

restart your terminal and you should be able to run nwbuild. If you run nwbuild --version and get the following error, go to step 1.a, otherwise go to step 2:

env: node\r: No such file or directory

Step 1.b (only if you get the above error)

# Install homebrew from the website
brew install fromdos
cd /usr/local/lib/node_modules/node-webkit-builder/bin
fromdos nwbuild

This shold fix the line ending issue. After that, restart the terminal and run nwbuild --version and you should be able to see some output.

Step 2: Running the application

You can run your application with nwbuild -r ~/Desktop/webkit-example. This will open the application after downloading necessary files. If you want to close the application, just use ctrl + c.

Step 3: Packaging the application

You should be able to run the following and create a binary for a 64bit mac:

nwbuild -p osx64 -o ~/Desktop/output ~/Desktop/webkit-example

This will crate the app in the output folder on your desktop.

Sources:

Creating desktop applications with node

How to package your node app