[Tutorial]Intro to Desktop development with Node.js


In this post I’m going to show you an introduction to desktop development with Nodejs.

We are going to use node webkit to port our apps for desktop, and build it using grunt.

We will create a simple application, compatible with Windows, Linux and Mac. Let’s start.

I - Requeriments

First, download and install Node.js.

Install the node-webkit and grunt:

$ sudo npm install -g nodewebkit
$ sudo npm install -g grunt-cli

To create our project easily, we are going to use Yeoman. It’s a project generetor, and support a big chain of frameworks.

To install yeoman, just run:

$ sudo npm install -g yo

To generate Node.js Webkit projects, we are going to use the Yeoman Node Webkit generator, to install it, run:

$ sudo npm install -g generator-node-webkit  

Fine! Now we are ready to start the development!

II - Creating our project

To create your project, run the command bellow.

You will need to provide some information, as your app name and description. It’s easy, just read the question and finish it.

When the terminal ask if you want to get an example, press no to create a blank project. You can get and test this examples to learn how to use Node.js for Desktop.

$ yo node-webkit  

Now you can run your app, just run:

$ nodewebkit app

The nodewebkit command open a new webkit instance, and the app/ argument is the folder where all the app will be developed.

If everything if working fine, you’ll see a screen with your app name and description. If you get some error, google it and/or comment here.

III - Creating the simplest application possible :)

Just to test how it works, let’s create a simple application.

It’s simple but will show you a big advantage of be using node! After run it, you will see what can be done with Node.sj.

In this app, we are just going to read our own source and show it in the screen. I’m writing this simple app because Node.js is so powerful, and it’s not easy to explain everything about it in just a tutorial.

First, add your javascript code to the app/views/index.html file:

<script type="text/javascript" src="../js/index.js"></script>

Now, let’s edit our app/js/index.js file!

var fs = require('fs');
fs.readFile('./views/index.html', 'utf-8', function (error, contents) {

Now, just run it to see how magic Node.js is!

Did you see? Yep, we wrote a simple recursive app with Node! When the screen is loaded at the first time, it will read the index.html and write it in the webkit document. Each time this code is appended to the document, it’ll call the js function again, starting an infinite loop.

IV - Let’s build our app

To build it, run the next command:

$ grunt dist-linux --force  

You can use dist-win and dist-mac. We are using –force because our app is using jshint, that will check all errors in our project. But we cannot use document.write function, it’s not recommended.

I used is just to show a simple tutorial. To skip the warning and build the app, only in this tutorial add the –force arg.

To run it(you can read more here):

$ cd dist/
$ ./node-webkit app.nw/</blockquote>

Done! Now you can see your app running.

Ok, it’s not useful, I know it.

But I used this example just to show you one of best advantages in use Node, now you will be able to create full desktop apps, for Windows, Mac and Linux with all the power of web apps. You can change and draw each part of the screen just when you really need it, making your app faster and simpler for the final user.

That’s all :( I’ll be posting more tutorials as soon as possible, so if you want to get more updates, feel free to follow my blog and/or subscribe your email.

Thank you for reading,

Aron Bordin.

Aron Bordin

Aron Bordin
Computer Science Student and AI researcher. Always coding something fun :)

[Tutorial] Android Material Icon Library

### Welcome!In this post, I'll show you how to use [Material Icon Library](https://github.com/code-mc/material-icon-lib).This is a really...… Continue reading