0
I’m making an application with backend Node.js and Handlebars. I’m having trouble rendering the file Hbs layout., I’ve run some tests on the archives server.js and main.js 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 on Github.
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"
}
You are not loading the layout because you are not importing or calling it anywhere. Your main route loads only main/Landing.hbs. If you want to load the other views, such as layout or navbar, you need to indicate
– BrTkCa
server.js app.engine('. hbs', express({ defaultLayout: 'layout', extname: '.hbs' }));
app.set('view engine', 'hbs');
app.use(express.static(__dirname + '/public'));
app.use(morgan('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true })); const mainRoutes = require('. /Routes/main'); app.use(mainRoutes);
– Apach3
main.js const router = require('express'). Router(); router.get('/', (req, res, next) => { res.render('main/Landing'); }); module.Exports = router;
– Apach3
Ah ok, try it
defaultLayout: 'layouts/layout'Apach3– BrTkCa
No app.engine('.Hbs', express({ defaultLayout: 'layouts/layout', extname: '.Hbs' }); .
– Apach3
I was going to call you in the chat so we don’t get stuck here, but you don’t have the privilege yet. try to insert this https://jsfiddle.net/vu4kn4nf/
– BrTkCa
So the best solution is to drop Hbs.
– Apach3