File hbs does not redeploy
-
I'm doing an application with backend Node.js and Handlebars. I'm having trouble rendering the file layout. Hbs, I've done some tests on the files server. j and Main. j and the routes are ok.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"><title>Realtime Twitter</title> <!-- Bootstrap core CSS --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="/css/starter-template.css" rel="stylesheet"></head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container"> <div class="starter-template"> <h1>Bootstrap starter template</h1> <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> </div><!-- /.container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></body>
</html>
My complete project in https://github.com/lobothiagodev/NodejsWorkstation/tree/master/twitter .
Dependencies
"dependencies": {
"body-parser": "^1.18.2",
"express": "^4.16.2",
"express-handlebars": "^3.0.0",
"hbs": "^4.0.1",
"mongoose": "^4.13.7",
"morgan": "^1.9.0"
}
-
Your problem is found in the line below in your file serves.js:
app.engine('.hbs', express({ defaultLayout: 'layout', extname: '.hbs' }));Second http://expressjs.com/pt-br/guide/using-template-engines.html , when setating the configuration
view engineyou must inform as parameter a Model mechanism what in case you are not doing, because you are informing yourself Express. Just change express For expressHbs as in the code below.app.engine('.hbs', expressHbs({defaultLayout: 'layout',extname: '.hbs'}));Reference
- http://expressjs.com/pt-br/guide/using-template-engines.html
