Search code examples
node.jsexpresshandlebars.jstemplate-enginefile-extension

How to use .html file extensions for handlebars in express?


So I was wondering how I could use .html extensions instead of .handlebars or .hbs extensions. I am doing this so I can develop using regular html so that my frontend developers can seamless edit files in their IDEs without any extra configuration. Plus it will help installing html templates much faster into our express applications.


Solution

  • So I was able to do this by changing three things in my app.js file I hope this helps everyone out as much as it helped me!

    var express  = require('express'),
        exphbr   = require('express3-handlebars'), // "express3-handlebars"
        helpers  = require('./lib/helpers'),
    
        app = express(), 
        handlebars;
    
    // Create `ExpressHandlebars` instance with a default layout.
    handlebars = exphbr.create({
        defaultLayout: 'main',
        helpers      : helpers,
        extname      : '.html', //set extension to .html so handlebars knows what to look for
    
        // Uses multiple partials dirs, templates in "shared/templates/" are shared
        // with the client-side of the app (see below).
        partialsDir: [
            'views/shared/',
            'views/partials/'
        ]
    });
    
    // Register `hbs` as our view engine using its bound `engine()` function.
    // Set html in app.engine and app.set so express knows what extension to look for.
    app.engine('html', handlebars.engine);
    app.set('view engine', 'html');
    
    // Seperate route.js file
    require("./routes")(app, express);
    
    app.listen(3000);