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!

score 15 · Accepted Answer · edited May 23 '17 at 12:32

15

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.

edited May 23 '17 at 12:32

Community

1
1

answered Jun 18 '16 at 21:57

zlumer

6,088
1
19
23

Yeah I had noticed that plugin when googling earlier, but since there's no documentation I was really confused. What exactly is the `'a'` in `res.render('a')`? I'd like to be able to have an arbitrary number of files in `/views` and have them all rendered using the same data object. – Weston Jun 18 '16 at 22:00
The `'a'` in `res.render('a')` is the name of your template: `a.html` (without extension). You can pass the same data object to every `render()` call like that: `var data = {a:1,b:2}; res.render('a', data);` – zlumer Jun 18 '16 at 22:35
So how would I also incorporate b into this setup? – Weston Jun 18 '16 at 22:36
`res.render('b', data);` — the templates are loaded automatically if they are in the `/views` directory with `.html` extension (as configured with the code above) – zlumer Jun 19 '16 at 15:09
Maybe things have changed since you posted your comment "there's no documentation". What documentation are you looking for exactly? I followed the Handlebars Github project link in this answer and found fairly verbose and complete documentation. Maybe give Handlebars another try as it really does abstract away the complexities that Mustache introduces. – Levi Roberts Jul 25 '16 at 08:15
Thank you for this simple answer! – Adrian Moisa Sep 30 '16 at 14:18
1

If you use `app.engine('html', …)` then you have to do `app.set('view engine', 'html')`. – binki Mar 25 '17 at 23:24

score 5 · Answer 2 · edited Dec 05 '17 at 19:57

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'});
});

score 1 · Answer 3 · answered Oct 20 '18 at 13:59

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.

score 0 · Answer 4 · answered Jun 28 '16 at 12:27

You should not include your html files in the public directory. Public Directory should contain only images, javascript and css files.

Though there are many ways to structure the node/express application, but you can find one good way using Express Generator.

http://expressjs.com/en/starter/generator.html

If you use this, it will create the app structure for you which clearly explains how you should keep you static files.

Serving static files in Express with mustache templating

4 Answers4