Writing and running your first "Hello World" app
Finally, we are ready to write our first simple application. We're going to revisit the usual "Hello World" application by making use of a Node.js module for markdown parsing.
"Markdown is a plain text formatting syntax designed so that it can be converted to HTML and many other formats using a tool by the same name." | ||
| --Wikipedia | ||
Let's create a Hello World folder and open it in Sublime Text 2 or in your favorite IDE. Now open a new package.json file and type in the following JSON code:
{
"name": "nw-hello-world",
"main": "index.html",
"dependencies": {
"markdown": "0.5.x"
}
}Note
The package.json manifest file, as you'll see in Chapter 6, Packaging Your Application for Distribution, is essential for distribution as it determines many of the window properties and primary information about the application. Moreover, during the development process, you'll be able to declare all of the dependencies.
In this specific case, we are going to assign the application name, the main file, and obviously our dependency, the markdown module, written by Dominic Baggott.
Tip
If you so wish, you can create the package.json manifest file using the npm init command from the terminal as you're probably used to already when creating npm packages.
Once you've saved the package.json file, create an index.html file that will be used as the main application file and type in the following code:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<script>
<!--Here goes your code-->
</script>
</body>
</html>As you can see, it's a very common HTML5 boilerplate. Inside the script tag, let's add the following:
var markdown = require("markdown").markdown,
div = document.createElement("div"),
content = "#Hello World!\n" +
"We are using **io.js** " +
"version *" + process.version + "*";
div.innerHTML = markdown.toHTML(content);
document.body.appendChild(div);What we do here is require the markdown module and then parse the content variable through it. To keep it as simple as possible, I've been using Vanilla JavaScript to output the parsed HTML to the screen. In the highlighted line of code, you may have noticed that we are using process.version, a property that is a part of the Node.js context.
Note
If you try to open index.html in a browser, you'd get the Reference Error: require is not defined error as Node.js has not been injected into the WebKit process.
Once you have saved the index.html file, all that is left is to install the dependencies by running the following command from the terminal inside the project folder:
$ npm install
And we are ready to run our first application!
Running NW.js applications on Sublime Text 2
If you opted for Sublime Text 2 and followed the procedure in the development tools section, simply navigate to Project | Save Project As and save the hello-world.sublime-project file inside the project folder.
Now, in the top menu, navigate to Tools | Build System and select nw-js. Finally, press Ctrl + B (or Cmd + B on Mac) to run the program.
If you have opted for a different IDE, just follow the upcoming steps depending on your operating system.
Running NW.js applications on Microsoft Windows
Open the command prompt and type:
C:\> c:\Tools\nwjs\nw.exe c:\path\to\the\project\
Tip
On Microsoft Windows, you can also drag the folder containing package.json to nw.exe in order to open it.
Running NW.js applications on Mac OS
Open the terminal and type:
$ /Applications/nwjs.app/Contents/MacOS/nwjs /path/to/the/project/
Or, if running NW.js applications inside the directory containing package.json, type:
$ /Applications/nwjs.app/Contents/MacOS/nwjs .
Note
As you can see in Mac OS X, the NW.js kit's executable binary is in a hidden directory within the .app file.
Running NW.js applications on Linux
Open the terminal and type:
$ ~/nwjs/nw /path/to/the/project/
Or, if running NW.js applications inside the directory containing package.json, type:
$ ~/nwjs/nw .
Note
Running the application, you may notice that a few errors are thrown depending on your platform. As I stated in the pros and cons section, NW.js is still young, so that's quite normal, and probably we're talking about minor issues. However, you can search in the NW.js GitHub issues page in order to check whether they've already been reported; otherwise, open a new issue—your help would be much appreciated.
Now, regardless of the operating system, a window similar to the following one should appear:
As illustrated, the process.version object variable has been printed properly as Node.js has correctly been injected and can be accessed from the DOM.
Perhaps, the result is a little different than what you expected since the top navigation bar of Chromium is visible. Do not worry! You can get rid of the navigation bar at any time simply by adding the window.toolbar = false parameter to the manifest file, but for now, it's important that the bar is visible in order to debug the application.
