Serving static files in Express with mustache templating

Question

I'm trying to serve a folder of static mustache files from Express, but can't seem to figure out how to get it working. Say I just have an object of data like

{
  a: 'Hello :)'
  b: 'Goodbye :('
}

And two files,

public/a.html

<div>{{a}}</div>

public/b.html

<div>{{b}}</div>

How could I get express setup to where it serves any arbitrary number of static html files and replaces the templated parts with just my one big object? Thanks!

Answer 1

Static files are usually only called static when they are not processed in any way before sending to user.

What you're trying to achieve is a typical templating system. You can just follow instructions in the plugin:

var mustacheExpress = require('mustache-express');

// Register '.html' extension with The Mustache Express
app.engine('html', mustacheExpress());

app.set('view engine', 'mustache');
app.set('views', __dirname + '/views'); // you can change '/views' to '/public',
    // but I recommend moving your templates to a directory
    // with no outside access for security reasons

app.get('/', function (req, res) {
    res.render('a');
});

Also consider using Handlebars, it's often more convenient to use than Mustache. You can find a list of differences in this question.

Answer 2

You can use mustachejs just like pug in express by setting mustache as view engine and defining its working like below code:

//required files
const fs = require("fs")
const mustache = require("mustache")

// To set functioning of mustachejs view engine
app.engine('html', function (filePath, options, callback) { 
    fs.readFile(filePath, function (err, content) {
        if(err)
            return callback(err)        
        var rendered = mustache.to_html(content.toString(),options);
        return callback(null, rendered)
    });
  });

// Setting mustachejs as view engine
app.set('views',path.join(__dirname,'views'));
app.set('view engine','html');

//rendering example for response
app.get('/',(req,res)=>{        
    res.render('index',{data:'Sample Data'});
});

Answer 3

I modify zlumer's answer a little bit and the following code works fine for me.

const express = require('express');
const app = express();
const mustacheExpress = require('mustache-express');

app.engine('html', mustacheExpress());

app.set('view engine', 'html');
app.set('views', __dirname + '/views');

app.get('/', function(req, res) {
  const data = {
    hello: 'world',
    foo: 'bar'
  };

  res.render('test', data);
});

app.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

Please check https://github.com/HemingwayLee/sample-mustache-express and feel free to clone and modify it.