node.jsexpresscontrollerhandlebars.js

Why is app.engine not defaulting to layout.hbs as a default


I created a style format with the layout.hbs and notice that all of the pages are not sharing the same consistency in style. I have noticed that I did not declare an app. engine within the app.js. Next, I implemented the app.engine code to set the default layout that is implemented within the layout.hbs

app.engine('hbs', hbs ({extname: 'hbs',defaultLayout: 'layout'}));

An error occurred stating that the layout.hbs cannot be located. I implemented the code again as I noticed I did not direct the folders directories to the layout .hbs. So I implemented the code to

app.engine('hbs', hbs ({extname: 'hbs',defaultLayout: 'layout', layoutsDir:__dirname + '/app_server/views'}));

And the error has disappeared and the default layout structure that has been set to layout.hbs is only showing on the local server index and not the same throughout all of the controllers. I am not too sure what else I am missing

controller and routes code

var express = require('express');
var exphbs = require('express-handlebars');
var router = express.Router();
var ctrlCaribbeanIslands = require('../controllers/CaribbeanIslands')



/* GET home page. */
router.get('/', ctrlCaribbeanIslands.login);
router.get('/blog/add',ctrlCaribbeanIslands.addPost);
router.get('/chat/add',ctrlCaribbeanIslands.addChat);
router.get('/review/add',ctrlCaribbeanIslands.addReview);
router.get('/traceYourTravel', ctrlCaribbeanIslands.tracetravel);


**module.exports = router;**

//controller 
module.exports.login = function (req, res) {
  res.render('index', { title: 'login'});
};

module.exports.addPost = function(req, res){
  res.render('index', { title: 'Add Post' });
};

module.exports.addChat = function(req, res){
  res.render('index', { title: 'Add Chat' });
};

module.exports.addReview = function(req, res){
  res.render('index', { title: 'Add Review' });

};
module.exports.tracetravel = function(req, res){
  res.render('index', { title: 'Trace travel' });

};

app.js

var createError = require('http-errors');
var express = require('express');
var handlebars = require('hbs');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var hbs = require ('express-handlebars');


var indexRouter = require('./app_server/routes/index');
var usersRouter = require('./app_server/routes/users');

var app = express();

app.engine('hbs', hbs ({extname: 'hbs',defaultLayout: 'layout', layoutsDir:__dirname + '/app_server/views'}));
app.set('views', path.join(__dirname, 'app_server','views'));
app.set('view engine', 'hbs');
app.use(express.static(path.join(__dirname, 'public')));

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function (req, res, next) {
  next(createError(404));
});

// error handler
app.use(function (err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Solution

  • @Zrushb Sorry, my bad, it's with app.set, not use. The code should look like this:

    const express = require("express"),
    hbs = require("hbs"),
    mongoose = require("mongoose")
    bodyParser = require("body-[arser")
    
    var app = express()
    //In ** your database if you need any
    mongoose.connect("mongodb:localhost:27017/**")
    
    
    app.set("view engine", "hbs")
    
    //To get or post
    
    app.set("view engine", "hbs") //Engine HBS
    app.set("views", __dirname +"/views") //Folder views (templates)
    app.use(express.static("public")) //Public is static (to get .js, images and .css)
    app.use('/css',express.static(path.join(__dirname, 'public/stylesheets'))); //Css folder specified (NOT WORKING)
    app.use(bodyParser.urlencoded({extended: false})) //Post Body Parser
    app.use(bodyParser.json()) //Parser for JSON files
    app.use(cookieParser())
    hbs.registerPartials(__dirname+ "views/partials")
    
    
    app.get("/" //etc)
    
    app.post(//etc)