Static files in Express rendering raw code instead of rendering proper HTML

Question

I want an anchor link in my layout.hbs file to link to layout2.hbs . However, it instead renders a page of the raw code instead of rendering proper HTML.

My console messages:

GET / 304 28.673 ms - -
GET /homepage.css 304 5.198 ms - -
GET /print2.css 304 8.190 ms - -
GET /layout2.hbs 304 0.555 ms - -

My index.js file that contains the routing:

var express = require('express');
var router = express.Router();
var db = require('monk')('localhost:27017/');
var userData = db.get('user-data');
var app = require('express')();

router.use(express.static('./views'));

router.get('/', function(req,res,next){
    res.render('layout');
});

router.get('/layout2', function(req,res,next){
    res.render('layout2');
});

module.exports = router;

My app.js file that contains handlebars and express.static code:

var express = require('express');
var app = require('express')();
var path = require('path');
var port = require('port');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var hbs = require('express-handlebars');
const queryString = require('query-string');

var routes = require('./routes/index.js');
var app = express();

// view engine setup
app.engine('hbs', hbs({extname: 'hbs', defaultLayout: 'index', layoutsDir: __dirname + '/views'}));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'views')));


app.use('/', routes);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});


module.exports = app;

The anchor link in layout.hbs :

<a target="a_blank" rel="noreferrer" href="/layout2.hbs"><img class="column2 arrow" src="http://i.imgur.com/FrvlU9D.png" alt="Arrow" title="Cleric Beast"/></a>

My file directory:

projectFolder
      │
      |
      |   
    public------print2.css
      |         style.css     
      |           
      | 
      |   
    routes-------index.js
      |
      |
      |
    views-------layout.hbs
      |         layout2.hbs
      |         index.hbs
      |
    app.js
  package.json

I expect that when the anchor link in layout.hbs is pressed, layout2.hbs will render. While layout2.hbs does load - it serves a page of code instead of rendering proper HTML.

Answer 1

Currently your router only knows how to render 'layout' template when client hits the root '/'. In the router code add the following lines:

router.get('/layout2', function(req,res,next){
    res.render('layout2');
});

And in the handlebar template the link should reference "/layout2"

Answer 2

the answer that I used was to change my .hbs files to .html files. This properly loaded the pages properly for my purposes.