feat(express): introducing handlebars nodejs template system (#1461)

lirantal · web-flow · commit f6e579765fc0 · 2016-08-29T08:32:21.000+03:00
This commit introduces handlebars template system and completely replacing Swig and the Consolidate project to handle multiple template systems. Fixes #1286
diff --git a/config/env/default.js b/config/env/default.js
@@ -9,7 +9,6 @@ module.exports = {
   },
   port: process.env.PORT || 3000,
   host: process.env.HOST || '0.0.0.0',
-  templateEngine: 'swig',
   // Session Cookie settings
   sessionCookie: {
     // session expiration is set by default to 24 hours
diff --git a/config/lib/express.js b/config/lib/express.js
@@ -16,7 +16,7 @@ var config = require('../config'),
   cookieParser = require('cookie-parser'),
   helmet = require('helmet'),
   flash = require('connect-flash'),
-  consolidate = require('consolidate'),
+  hbs = require('express-hbs'),
   path = require('path'),
   _ = require('lodash'),
   lusca = require('lusca');
@@ -99,12 +99,11 @@ module.exports.initMiddleware = function (app) {
  * Configure view engine
  */
 module.exports.initViewEngine = function (app) {
-  // Set swig as the template engine
-  app.engine('server.view.html', consolidate[config.templateEngine]);
-
-  // Set views path and view engine
+  app.engine('server.view.html', hbs.express4({
+    extname: '.server.view.html'
+  }));
   app.set('view engine', 'server.view.html');
-  app.set('views', './');
+  app.set('views', path.resolve('./'));
 };
 
 /**
diff --git a/modules/core/server/controllers/core.server.controller.js b/modules/core/server/controllers/core.server.controller.js
@@ -24,7 +24,7 @@ exports.renderIndex = function (req, res) {
   }
 
   res.render('modules/core/server/views/index', {
-    user: safeUserObject
+    user: JSON.stringify(safeUserObject)
   });
 };
 
diff --git a/modules/core/server/views/404.server.view.html b/modules/core/server/views/404.server.view.html
@@ -1,10 +1,10 @@
-{% extends 'layout.server.view.html' %}
+{{!< layout}}
 
-{% block content %}
+{{#contentFor 'content'}}
 <h1>Page Not Found</h1>
 <div class="alert alert-danger" role="alert">
   <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
   <span class="sr-only">Error:</span>
   {{url}} is not a valid path.
 </div>
-{% endblock %}
+{{/contentFor}}
diff --git a/modules/core/server/views/500.server.view.html b/modules/core/server/views/500.server.view.html
@@ -1,8 +1,8 @@
-{% extends 'layout.server.view.html' %}
+{{!< layout}}
 
-{% block content %}
+{{#contentFor 'content'}}
 <h1>Server Error</h1>
 <pre>
   {{error}}
 </pre>
-{% endblock %}
+{{/contentFor}}
diff --git a/modules/core/server/views/index.server.view.html b/modules/core/server/views/index.server.view.html
@@ -1,5 +1,5 @@
-{% extends 'layout.server.view.html' %}
+{{!< layout}}
 
-{% block content %}
+{{#contentFor 'content'}}
   <section ui-view></section>
-{% endblock %}
+{{/contentFor}}
diff --git a/modules/core/server/views/layout.server.view.html b/modules/core/server/views/layout.server.view.html
@@ -1,4 +1,4 @@
-﻿<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en" ng-strict-di>
 <head>
   <meta charset="utf-8">
@@ -32,14 +32,14 @@
   <link href="{{favicon}}" rel="shortcut icon" type="image/x-icon">
 
   <!-- Application CSS Files -->
-  {% for cssFile in cssFiles %}<link rel="stylesheet" href="{{cssFile}}">{% endfor %}
+  {{#each cssFiles}}<link rel="stylesheet" href="{{this}}">{{/each}}
 </head>
 
 <body class="ng-cloak">
   <header ng-include="'/modules/core/client/views/header.client.view.html'" class="navbar navbar-fixed-top navbar-inverse"></header>
   <section class="content">
     <section class="container">
-      {% block content %}{% endblock %}
+      {{{block "content"}}}
     </section>
   </section>
 
@@ -56,20 +56,20 @@
 
   <!--Embedding The User Object-->
   <script type="text/javascript">
-    var user = {{ user | json | safe }},
-        env = "{{ env }}";
+    var user = {{{ user }}};
+    var env = "{{ env }}";
   </script>
 
   <!--Load The Socket.io File-->
   <script type="text/javascript" src="/socket.io/socket.io.js"></script>
 
   <!--Application JavaScript Files-->
-  {% for jsFile in jsFiles %}<script type="text/javascript" src="{{jsFile}}"></script>{% endfor %}
+    {{#each jsFiles}}<script type="text/javascript" src="{{this}}"></script>{{/each}}
 
-  {% if livereload %}
+  {{#if livereload}}
   <!--Livereload script rendered -->
   <script type="text/javascript" src="{{host}}:35729/livereload.js"></script>
-  {% endif %}
+  {{/if}}
 </body>
 
 </html>
diff --git a/package.json b/package.json
@@ -40,10 +40,10 @@
     "compression": "~1.6.1",
     "connect-flash": "~0.1.1",
     "connect-mongo": "~1.1.0",
-    "consolidate": "~0.14.0",
     "cookie-parser": "~1.4.1",
     "crypto": "0.0.3",
     "express": "~4.14.0",
+    "express-hbs": "^1.0.2",
     "express-session": "~1.13.0",
     "file-stream-rotator": "~0.0.6",
     "generate-password": "~1.1.1",
@@ -73,7 +73,6 @@
     "phantomjs-prebuilt": "~2.1.4",
     "serve-favicon": "~2.3.0",
     "socket.io": "~1.4.5",
-    "swig": "~1.4.2",
     "validator": "~5.1.0",
     "winston": "^2.2.0",
     "wiredep": "~4.0.0"

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ exports.renderIndex = function (req, res) {`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`res.render('modules/core/server/views/index', {`
`27`		`- user: safeUserObject`
	`27`	`+ user: JSON.stringify(safeUserObject)`
`28`	`28`	`});`
`29`	`29`	`};`
`30`	`30`