[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
Install the node-webkit and grunt:
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:
To generate Node.js Webkit projects, we are going to use the Yeoman Node Webkit generator, to install it, run:
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.
Now you can run your app, just run:
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.
Now, let’s edit our app/js/index.js file!
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:
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):
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,
->Appendices - Useful links