Handlebars/Node/Express Can't load files

Question

So I'm working on developing a Node/Express webapp for basic CRUD operations and I'm having a hard time implementing Handlebars within the project.

When I try to use handlebars none of my stylesheets from my .hbs (previously .html) pages are loading.

Here's the file tree:

Here is the error:

And here is an example of the script import statements from

index.hbs

<!-- Bootstrap -->
    <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

And Finally here is the server.js file

var express     = require('express'),
    bodyParser  = require('body-parser'),
    path        = require('path'),
    mysql       = require('mysql'),
    dbconfig    = require('./config/database'),
    exphbs  = require('express-handlebars');

var connection = mysql.createConnection(dbconfig.connection)
connection.query('USE ' + dbconfig.database);

var app = express();



//Body Parser Middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

//Set static path
//app.use(express.static(path.join(__dirname, 'public')));
//app.use(express.static(__dirname + '/public'));
//app.set('views', __dirname + '/views');
//app.use('/views', express.static(path.join(__dirname, '/views')));


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

app.set(express.static(__dirname + '/public'));

//app.use('/views/vendors', express.static(path.join(__dirname, '/views/vendors')));
//app.use(express.static(__dirname + '/public/vendors'));


app.get('/', function(req, res) {
    res.render('index');
    connection.query("SELECT * FROM Student", function(err, rows){
        console.log(rows);
    });


});

app.listen(80, function() {
    console.log('we are live on 80');
});

I tried using various static paths from other things I found on SO but wasn't able to get any of them to work.

Any help would be greatly appreciated!!

Thanks!

Answer 1

Fixed my problem by adding the following line above my app.get('/'....

app.use("/vendors",express.static(__dirname + "/vendors"));
app.use("/build",express.static(__dirname + "/build"));
app.use("/images",express.static(__dirname + "/images"));


app.get('/', function(req, res) {

Answer 2

I think that can be possible that the problem is in the handlebars configuration, please look at a configuration like this:

app.engine('.hbs',exphbs({
  defaultLayout:'layouts',
  layoutsDir:path.join(app.get('views'),'layouts'),
  partialsDir:path.join(app.get('views'),'partials'),
  extname:'.hbs',
  helpers: helpers
}));
app.set('view engine','hbs');

maybe in yours it would be:

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

if you are usign app.set(express.static(__dirname + '/public'));

try to put in the public folder your styles for example the bootstrap folder, and then all you have to do is call it in this way:

<link href="/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">