Node.js - write a Hello World from easy to localized method

As you you I'm currently working on to localized the Webmaker.org tools, and to keep really deeply understand the method before going into the implementation stage I have made myself a bunch of Hello World web app using Node.js which will be useful to do the localization.

Currently I have come up with 5 methods to write a Hello World web app listed below in order:

  1. app-normal.js
  2. app-express.js
  3. app-static.js
  4. app-render.js
  5. app-localized.js

The order above I have listed is the order that I think it is from the very basic to the not hardest, but the more complicated way.

This project is also available on github and you can fork it by follow this link https://github.com/alicoding/Hello-World

In this blog post I won't go on instruction and the details as I have written a README file in my github repository and you can read it from there.

So lets get started with the the first one app-normal.js and the reason I call this normal is the normal way by using the regular node.js

var http = require('http');

http.createServer(function (req, res) {  
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(3000);

console.log('Server running at http://127.0.0.1:3000/');  

So from the code above. Line #1 first we have to require module called http then in line #3 we will start create the server with having a callback that accept the request and response, and we will writeHead by doing the status 200 and the header information then we will write a message "Hello World". Also we are listening to port 3000 in this case.

The next app will be app-express.js this is going to be my favorite since this beautiful framework express really simplified a lot of works for me

var express = require('express');  
var app = express();

app.get('/', function(req, res){  
  res.send('Hello World');
});

app.listen(3001);

console.log('Server running at http://127.0.0.1:3001/');  

As you can see from the above code on line #1 we first require express module then we call the constructor on line #2. Then on line #3 we are saying that if they request the root path which is http://localhost:3001 we will send them the message "Hello World".

This third app I really loved it app-static.js

var express = require('express');  
var app = express();

app.use(express.static(__dirname + '/public'));

app.listen(3002);

console.log('Server running at http://127.0.0.1:3002/');  

For line #1-2 will be the same as the previous program, but now #line 4 where we really going to love this API. The express.static API allows us to serve a static web pages and we can specify where we want to serve the static pages and in my case I have specified __dirname + '/public'. With __dirname this is the prefix variable that will point to your current directory of your app. And obviously we will have to create .HTML file in the directory call public and that will serve the file from there.

The next one app-render.js

var express = require( "express" ),  
    nunjucks = require( "nunjucks" ),
    path = require( "path" ),
    app = express(),
    nunjucksEnv = new nunjucks.Environment( new nunjucks.FileSystemLoader( path.join( __dirname, '/public' )));

nunjucksEnv.express( app );

app.get('/', function(req, res){  
    res.render( "nunjucks.html", { helloworld: "Hello World"});
});

app.listen(3003);

console.log('Server running at http://127.0.0.1:3003/');  

This one will be more complicated, but surely it will be beneficial to many developers who would like to start use template and in my example I'm going to integrate nunjucks with it. in line number #1-4 I don't think I have to explain on that part again, but for #5 basically we are setting up the nunjucks path and #7 we are using it with express. and as you can see on line #10 we are now rendering the HTML using the file we have in public directory and passing them some key value pair as JSON object so that we can display. And this is the content of nunjucks.html

 

<h1>{{helloworld}}</h1>  

And the last but not least this is how are going to do the localization

var express = require( "express" ),  
    nunjucks = require( "nunjucks" ),
    path = require( "path" ),
    i18n = require( "./lib/i18n.js" ),
    app = express(),
    nunjucksEnv = new nunjucks.Environment( new nunjucks.FileSystemLoader( path.join( __dirname, '/public' )));

nunjucksEnv.express( app );

// Setup locales with i18n
app.use( i18n.abide({  
  supported_languages: [
    "en_US", "th_TH"
  ],
  default_lang: "en_US",
  translation_directory: "locale",
  localeOnUrl: true
}));

app.get('/', function(req, res){  
    res.render( "localized.html" );
});

app.listen(3004);

console.log('Server running at http://127.0.0.1:3004/');  

Line #4 we are first requiring the i18n.js which we have it in the directory call lib and from line #10 we are setting up the i18n with some default information as where we are going to serve the locales and what languages are we going to support. Also in my case I'm using this with nunjucks template as an example.

<h2>{{ gettext("helloworld") }}</h2>  

If you have any question feel free to comment below.