Thursday, August 4, 2011

Simple hello world application in node.js MVC

In my previous blog post, I gave an introductory tutorial on how to set up node.js as an MVC framework utilizing the prepackaged example found in the node.js distribution. This post will be a follow up to my previous post and will be a basic tutorial on understanding how the framework works in order to create a hello world application. I will not be getting into the underlying logic of the framework. Instead the tutorials main goal is to create a quick understanding of how to quickly begin to use the framework.

Many different MVC frameworks follow a similar logic in naming and file distribution conventions. Unfortunately, the prepackaged MVC framework does not have a built in support for model files and thus, I will not be discussing this in the tutorial. 'Controllers' are the behavioral layer of the framework and interact between the views and the models. In this particular example, all controller files should be placed in the accompanied controllers folder. 'Actions' represent the individual behaviors that the controllers are able to perform and are often represented via an operation on the corresponding controller. This example is no different from the is norm. 'Views' are regarded as the presentation layer and conventionally are named after the corresponding action. This example is no different.

To sum up the last paragraph. The example provided in the node.js distribution follows conventional MVC naming and file distribution conventions. That is, each controller file is found in the controllers folder and each controller should have a corresponding view folder named exactly the same as the controllers file name. Each view in a controllers view folder corresponds directly to an action found on the given controller. The view is named exactly as the action is named.


-controllers
--app.js
--example.js
-views
--app
---index.html
--example
---index.html
---action1.html
---action2.html
--layout.html


I hope you noticed, I threw in the layout.html file in the views file. The layout.html file acts as a basic html container page. The view page will be rendered in the layout via <%= body %>.

Now that the basic structure of the MVC framework is explained, in this particular example all actions must first be declared on the MVC.js file in the bootController function. For this tutorial, the predefined actions are suffice.

Create a .js file in the controllers folder and name it example. Place the following code inside it


// creates an array of callable actions
module.exports = {

// default action
index: function(req, res){
var text = "Hello World!";
res.render(text);
}
};

The important thing to notice here is that the passed variable does not have the same name as the action as this does not matter.
Create a folder in the views folder and name it example. Then create a file named index.html inside the example folder. Place the following code inside it.

<%= text %>


There you go. A simple hello world application on how to use the prepackaged MVC example found in the node.js distribution.

Tuesday, July 5, 2011

Setting up node.js express to work as an MVC framework - Basic tutorial

Recently, I gave node.js a try after hearing all the hype about its potential and, honestly, it gave me the perfect excuse to breakout and dust off my Linux skills. To make a long story short, I ended up doing a fresh installation of Ubuntu 11.04 and deleted my aging Ubuntu OS. This was not necessary and not suggested.

After getting everything to work, I finally wanted to learn how it worked. Therefore, I read The Node Beginner Book by Manual Kiessling. An excellent introductory tutorial that should not be skipped. After become an advanced novice, I wanted to dive into developing my own rapid prototypes. However, I am used to working with CakePHP and wanted a similar style framework to make my mock ups quick. The following is what I learned from my endeavors.

Node.js as MVC

Install the express node module
npm install -g express

Create the project folder
express /path/to/project

Install the express folder in the folder of your choice. I chose to put my in the same folder that node.js belongs in
cd /path/to/folder node is in/ && npm install express

As my Linux skills still have room for improvement, I used the gui and went to express/examples/mvc and copied all and went to /path/to/project and pasted all overriding all the old stuff.

Open app.js with your favorite editor and change line 6 to
var express = require('express')

Open mvc.js and change line 7 to
express = require('express')

Go back to the terminal and install ejs
npm install -g ejs

Go to the project folder and enter node_modules
cd /path/to/project/node_modules

Install the source code of ejs
npm install ejs

Now that all modules are loaded go back to the project folder and update the dependencies
cd .. && npm install -d

The MVC framework should be ready to go. I'll be posting examples using the MVC framework shortly. So keep watching.