Sample Project of Node.js with Hapi and Boostrap
|Shares :

Sample Project of Node.js with Hapi and Boostrap

I've created some simple examples of Node.js to get you started with your own projects. They were all written on top of Express Framework. Here they are

Now lets make another example but this time, I'll be using Hapi 

What is HapiJS ? 

Hapi was developed by Eran Hammer and the team at Walmart labs. They found that Express (Relax, I previously wrote Projects with Express) wasn't meeting their needs for maintainability and extensibility. 

Eran Wrote on his blog

hapi was created around the idea that configuration is better than code, that business logic must be isolated from the transport layer, and that native node constructs like buffers and stream should be supported as first class objects. But most importantly, it was created to provide a modern, comprehensive environment in which as much of the effort is spent delivering business value.

I'm not suggesting you to switch from Express or other Node frameworks to Hapi, but you're probably gonna miss 'a thing' if you dont bat an eye on Hapi. 

How we make (run) a server in Hapi : 

var Hapi = require('hapi');

var server = new Hapi.Server(3000);

server.start(function () {         
   console.log('Server running at:', server.info.uri);
});

Routing

Its clean and we can understand it very easily

server.route({
    method: 'GET',     
    path: '/',      
    handler: function (request, reply) {
        reply('Hello, world!');      
    }
});

server.route({      
   method: 'GET',      
   path: '/hello',     
   handler: function (request, reply) {
         reply({msg:'This is Json Response'});       
   }
});


I don't wanna dig to deep about Hapi here for you can search it yourself. But in this short tutorial ( actually I dont wanna call this tutorial :| ). 

Our App will look like this. Hate the look ? have it your way...edit it yourself....:D 



We're using/making :

  • Handlebars template Engine
  • MongoDB or MySQL ? coming up next.....
  • Sample of Layouting
  • Module as Hapi Plugins
  • Good (plugins) for Logging
  • *write yours*.

Forgive me...:( Im again too lazy to write the whole things here.....but wait...

To motivate you....here the Project structure




With Hapi, you can easily and elegantly organize your modules ( Not the Node Modules but the Project modules). 

You should register each of your module as a Hapi Plugin

Take a look at this (left), I have 3 main modules (and its Children *if any*)

  • documents
  • employees
  • user-managements

Here's how we do that

....................

. ....................scroll

...........................

.....................scroll

.......................... scroll

...............

............................keep scrolling

......................

.................

...............

. ............................

For example : User-management > User > index.js (as a Hapi Plugin)

/************************************************** 
* Configuring Employees Plugins 
**************************************************/
/** 
* Register Plugins 
*/
exports.register = function(server, options, next) {
   server.route([				
    {			
      method : 'GET', 
      path : '/employees',
      handler : function(request, reply) {
								
         reply.view('employees/displayEmployees', {title:'Employees'});			
      }		
   },		
   {
      method : 'POST',			
      path : '/employees',			
      handler : function(request, reply) {
            //....do smth here
      }		
   }							
  ]);		

next();

};

/** 
* Plugin attributes... 
* we have here the Name and the Version of the plugin 
* make every name Unique 
*/

exports.register.attributes = {

  name : 'EmployeesModule',
  version : '1.0.0'
};

Register it as Plugin (Inside Server.js)

/** 
* Register all Modules as Plugins Here 
*  
*/
var plugins = [
		
  { register : require('vision') }, //register Vision with others Plugins	
  { register : require('./modules/employees/index.js') },	
  { register : require('./modules/user-management/users/index.js') }		
];


Routing Static Files

We have static files (images, css, javscript etc). Ofcourse we need to make it accessible.

/** 
* Routing Static Pages [JS, Css, Images, etc] 
*/

server.register(require('inert'), function(err) {		
   if (err) {throw err;}

   server.route({		
     method : 'GET', path : '/public/{path*}', 
     handler : {			
       directory : {				
       path : './public',				
       listing : false,				
       index : false			
       }		
    }
	
   });	

});


HTML Template

<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/public/css/bootstrap.min.css" rel="stylesheet">
<link href="/public/plugins/font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="/public/css/back.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js">
</script><![endif]-->	
</head>
<body>
<div id="wrapper">    
 <!--Sidebar Menus-->    
  {{> nav}}        
 <!--Dynamic Content-->    
 <div id="page-wrapper">    
  {{{content}}}    
 </div>
</div>
<!--main Scripts-->
<script src="/public/js/jquery-1.10.2.min.js"></script>
<script src="/public/js/bootstrap.min.js"></script>
</body>
</html>


Alright...I'm done....You can Take a look the full Source here 

Note that I have not yet implemented any database here....But still working on it....and probably you would write that yourself....


Feel free to ask anything. 



Tags : #nodejs #hapijs


SHARES :


Budy K's Avatar

Sains & Teknologi Enthusiast, Software Developer. Check my profile!
> 75% komen akan dibalas. Mohon sabar ya. Simpan halaman ini dan cek kembali lagi

Comments

* Email will not be published


    Privacy .ToS .Contact Us
    © 2017 Teknosains