ENOENT: no such file or directory

Question

I made a small project with authentication based on this example https://github.com/lyndachiwetelu/using-passport-with-sequelize-and-mysql. I had a mistake "Error: ENOENT: no such file or directory, open 'C:\Users\user\Desktop\using-passport-with-sequelize-and-mysql-master\app\views\layouts\main.hbs'" But I did not point this way anywhere, it's strange. I beg you to help me, guys <3

I've alrready tried to make such way, and create such file(main.hbs), but in this case i can't reach another pathes ( dashboard, signin ). In this case they all have the same html-code from main.hbs

server.js :

var express    = require('express')
var app        = express()
var passport   = require('passport')
var session    = require('express-session')
var bodyParser = require('body-parser')
var env        = require('dotenv').config()
var exphbs     = require('express-handlebars')



//For BodyParser
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());


 // For Passport
app.use(session({ secret: 'keyboard cat',resave: true, 
saveUninitialized:true})); // session secret
app.use(passport.initialize());
app.use(passport.session()); // persistent login sessions


 //For Handlebars
app.set('views', './app/views')
app.engine('hbs', exphbs({extname: '.hbs'}));
app.set('view engine', '.hbs');


app.get('/', function(req, res){
  res.send('Welcome to Passport with Sequelize');
});


//Models
var models = require("./app/models");


//Routes
var authRoute = require('./app/routes/auth.js')(app,passport);


//load passport strategies
require('./app/config/passport/passport.js')(passport,models.user);


//Sync Database
models.sequelize.sync().then(function(){
console.log('Nice! Database looks fine')

}).catch(function(err){
console.log(err,"Something went wrong with the Database Update!")
});



app.listen(5000, function(err){
    if(!err)
    console.log("Site is live"); else console.log(err)

});

app/routes/auth.js :

var authController = require('../controllers/authcontroller.js');

module.exports = function(app,passport){

app.get('/signup', authController.signup);


app.get('/signin', authController.signin);


app.post('/signup', passport.authenticate('local-signup',  { successRedirect: '/dashboard',
failureRedirect: '/signup'}
                                                ));


 app.get('/dashboard',isLoggedIn, authController.dashboard);


 app.get('/logout',authController.logout);


 app.post('/signin', passport.authenticate('local-signin',  { successRedirect: '/dashboard',
 failureRedirect: '/signin'}
                                                ));


 function isLoggedIn(req, res, next) {
if (req.isAuthenticated())
    return next();

 res.redirect('/signin');

}

}

app/contrroller/authcontroller.js :

 var exports = module.exports = {}


 exports.signup = function(req,res){

 res.render('signup'); 

}

 exports.signin = function(req,res){

 res.render('signin'); 

}

 exports.dashboard = function(req,res){

 res.render('dashboard'); 

}

  exports.logout = function(req,res){

  req.session.destroy(function(err) {
  res.redirect('/');

});

}

In folder "app\views" only files with html-code, so i don't show them.

I still can't understand where program take this path \app\views\layouts\main.hbs

PROBLEM: Error: ENOENT: no such file or directory, open 'C:\Users\user\Desktop\using-passport-with-sequelize-and-mysql-master\app\views\layouts\main.hbs'

error_screen

structure_screen

Answer 1

Express-Handlerbars (the view engine you're using) expects a main layout file which you can see on the docs (search for "main.handlebars") https://github.com/ericf/express-handlebars

You can also see the directory structure express handlebars expects under https://github.com/ericf/express-handlebars#basic-usage

This acts as a "main" layout that your other views extend. So you can put common code in main such as a navbar etc.

You can either follow the docs or when you render your views use {layout:false} as one of the props passed in e.g

res.render('home', {layout: false});

and see if that works. You can also read about the defaultLayout here https://github.com/ericf/express-handlebars#defaultlayout

You could potentially try setting the default layout to false by default, though I don't know what effect this will have or if there are other unintended consequences. It might not even work at all.

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

Your best bet is to use a main layout, so you can put the common code in there, so if you wanted to update your logo for example you would only have to do it in 1 place rather than every view.

To do this, in your "views" directory create another directory called "layouts" and add a file called "main.hbs" with the following code in it. The {{{body}}} area is where your code from other views will be rendered.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Example App</title>
</head>
<body>

    {{{body}}}

</body>
</html>