noradf

We saw what does a Noradf application looks like in our previous post (Part I and Part II). Now it’s time to create a sample application to show Noradf in action

Creating a Noradf application

First of all we need to init our sample application

noradf init

Now we need to create our module

noradf module 'Sample Module'

Now we’re ready for create our Hello World application. Since Noradf uses Express we can use the app object to config our application routing. We will define the routing in our module file

'use strict';

var path = require('path');

module.exports = function (app) {
    app.get('/', function (req, res) {
        res.render(path.join(__dirname, 'views/index.html'));
    });
};

You have to create a file name index.html under a directory called views inside your module folder

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Noradf</title>
</head>
<body>
    <h1>Hello Noradf</h1>
</body>
</html>

And now, you have to create a file named server.js in the root directory of your application like this

'use strict';

var noradf = require('noradf-core');
noradf.startServer();

Init your server

node server.js

And point to http://localhost:3000

You have your first Noradf application running!!!

Let’s see how pass variables to our html file. We use swig for template rendering. Change your module.js file

'use strict';

var path = require('path');

module.exports = function (app) {
    app.get('/', function (req, res) {
        res.render(path.join(__dirname, 'views/index.html'), {date: new Date().toDateString()});
    });
};

And your index.html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Noradf</title>
</head>
<body>
    <h1>Hello Noradf. It's {{ date }}</h1>
</body>
</html>

Advanced configuration

You can split your client side logic from your server side logic in your application. Just create a public directory and a server directory to do that

In your public directory you can create an assets directory. Everything under this directory will be serve as a static file. Your static files will be server under the nameofyourmodule path, e.g.: http://localhost/sample-module/js/myjs.js

You can put your routes files under a directory called routes in the server directory. These files must be like the module.js file and you can inject dependencies in the same way that you do that in the module.js file

This is a new framework and we are developing some applications with it so more features and modules will come. Check the Github Organization Repositories for more information

You can fork this example from the Github Repository

Comparte este articuloShare on Facebook
Facebook
Share on Google+
Google+
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

Comentarios

comentarios