Node.js(Part-2) Application Layout

Continuing from the last post  , this tutorial will give a short description of Jade, using partials with Jade and Twitter Bootstrap.

If you have looked at the directory structure of the application that express has automatically created, you will notice a structure similar to something like this:

/

|—- app.js

|—- package.json

|—- public

|        |—- stylesheets

|                |—- style.css

|—- routes

|       |—- index.js

|—- views

|       |—- index.jade

|       |—- layout.jade

|—- node_modules/…

1. app.js :

the main configuration and boot file for the application. This will describe the global includes, the server configurations(deployment/test/production, etc), the available routes and any other data that is required by the application for initial bootstrap. The current app.js file only includes ‘express’ (huh).

After this we create a server by issuing the following statement

This creates a new server object for us and also makes it available outside this file by exporting it.

The next important thing is the ‘app.configure()’ statement.  The callback in ‘app.configure’ sets the global variables for the application. For example, the following statement

app.set(‘view engine’, ‘jade’);

sets the  view engine of the application as ‘jade’. There are other view engines like ‘ejs’ that are available for nodejs(More about view engines coming soon). During the course of this tutorial, i will be using ‘jade’ as the default view engine.

After this, there are few more ‘app.configure’ statements that describe the run-environments that will be available for the application. Different settings can be provided for different environments. For example, the debugging, stack-traces and other utilities will be turned on during ‘development’ environment while the same may be off in ‘production’. The port numbers can be different for different environments. The current setting provides the user with two environments – development and production.

Then you will see the following statement

app.get(‘/’, routes.index);

This tells the application that if a GET request arrives on the URL ‘/’ , then redirect it to the ‘index.js’ file in ‘routes’ folder.

The final statement

app.listen(3000);

will prompt the server to start listening for incoming requests on port 3000.

2. public/

The contents of this directory will be available publicly. So the contents of this will typically include all the stylesheets, client side javascipt files, javascript libraries, images and other static content. The current contents of the directory are one folder and a css in that.

3.  routes/

The routes will contain all the URL path mappings in the application and their respective callbacks. For example, we will(later) have a URL ‘/post/new’ mapped to a callback that will define the functionality of adding a new post.  In the current state, the root URL ‘/’ is mapped to a callback that renders the main page.

4. views/

The views directory will contain all the ‘views’ or the page content in .jade files. It also contains ONE ‘layout.jade’ file which is the container for all the views for the application. Consider this as a container in which different pages will be shown depending on the incoming request.  The body of the requested view will be inserted into the ‘body’ variable of ‘layout.jade’. Typically, all the javascript and css includes will take place in this file so that they will be available for all the views. It has been done in the ‘layout.jade’ file which includes the only css currently available.  This modularity makes sure that the includes are defined only once and then they are available to all the pages.

The views are typically rendered by invoking ‘render’ method on the ‘response’ object received at the server. For example, in the current ‘index.js’ file in ‘routes’ directory, the following line renders the ‘index.jade’ view

Express automatically links the ‘views’ directory with the ‘routes’ directory so that there is no need to provide the full path of the .jade file to render a view. The ‘index.jade’ file will be searched for in the directory root of  ‘views’ (views/). Note that there are additional parameters being passed to the ‘render’ parameter apart from the actual view to render.  This additional object contains extra information that is passed on to the view. Jade picks up the references to that data in the view while rendering and replaces the references with the actual values.

For example, in the current ‘index.jade’ file, the first line renders the value contained in ‘title’ parameter. This will be replaced by the actual value of ‘title’ contained in the object that is passed to this view via res.render() call.

I have already explained the uses of ‘package.json’ file and ‘node_modules’ directory.

 

Now it will be easy to understand the flow of of an incoming request.

Request a URL( say ‘/abc’) –> pass the request to the routes –> invoke the callback that maps to ‘/abc’ [present in routes/]–> render the view (res.render(‘page’, {data : d}))[present in views/]

This wraps up the explanation of how express decouples the rendering and processing of data to provide for a clean application structure.  All the views can be placed in one directory and all the processing in another, while the two can be easily wired up.  In the next tutorial(and the ones after that), I will build on this framework and add functionalities one at a time, starting with JADE and Twitter Bootstrap.

ciao

Share Comments
comments powered by Disqus