Server side includes (SSI) with grunt connect web server

Question

We are using yeoman for our dev process and currently using the "grunt server" command to run the grunt connect web server for local development. Every time we save a file, grunt will run all its tasks and reload the browser.

The problem is with Server side includes we use to include the header and footer. We had it previously working with Apache, IIS and Tomcat but have no idea how to get connect to do the same. It just treats it as an html comment.

eg include:

<!--#include virtual="header.html" --> 

So, 1. Is there a way to get grunt/connect to include these files? 2. If not can we use Apache with yeoman/grunt? 3. If all fails, is there another way to include files with connect?

Answer 1

You can have express handle SSI with the help of the ssi node module.

I put together a github repo with this simple example: https://github.com/sfarthin/express-ssi-example .

I deployed this app to heroku so you can see it in action: http://intense-basin-9464.herokuapp.com/

app.use(function(req,res,next) {
    var filename    = __dirname+(req.path == "/" ? "/index.shtml" : req.path);

    if(fs.existsSync(filename)) {
        res.send(parser.parse(filename, fs.readFileSync(filename, {encoding: "utf8"})).contents);   
    } else {
        next();
    }
});

Answer 2

you can easily use connect-ssi: https://github.com/soenkekluth/connect-ssi I also used the ssi module for that. for now I includes are only allowed for .shtml files. 'will change that soon.

Answer 3

Thanks a lot for all your help @steve-farthing and @soenke I finally ended up using a much simpler solution which was to install Apache with SSI enabled and add the following JS tag to the footer.

<script type="text/javascript">
    document.write('<script src="//localhost:35729/livereload.js?snipver=1" type="text/javascript"><\/script>')
</script>

Now when we run grunt serve we still need to manually navigate to http://localh0st/app/ but everything else seems to work fine after that.