Search code examples
javascripthtmlnode.jsexpressejs

Node Ejs module, include not working


Im having some trouble including a html snippets into my index.html . I have tried to follow, the ejs documentation but I just can't seem to make it work.

Directory Structure:

project
-public
--assets
---css
---images
---js
--Index
---index.html + index.css and index.js
--someOtherPageFolder
-views
--partials
---partials1.ejs
--index.ejs
--layout.ejs
-server.js

This is my server.js (NEW):

var express  = require("express");
var partials = require("express-partials");
var http     = require('http');
var path     = require('path');
var app      = express();

app.get("/", function(req, res) {
  res.redirect("index");
});

app.configure(function(){
  app.set('port', process.env.PORT || 8888);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'ejs');

  app.use(partials());
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.json());
  app.use(express.urlencoded());
  app.use(express.methodOverride());
  app.use(express.bodyParser());
  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));
});

http.createServer(app).listen(app.get('port'), function(){
      console.log('App listening on port ' + app.get('port'));
    });

This is my test.ejs:

<h1>This is test!</h1>

And this is where I want the html snipp to go:

<div id="sb-site">
    <div class="">
        <p>Not test</p>
        <%- include test.html %> 
    </div>
</div>

What am I doing wrong? Is there also a way for me to do this and use .html instead of .ejs (Im using eclipse and it doesn't support .ejs files)


Solution

  • Express 3 breaks ejs partials, use express-partials instead.

    // Include it like so with your other modules
    var express       = require("express");
    var partials      = require('express-partials');
    var server        = express();
    
    // Finally add it into your server conviguration
    server.configure(function(){
       server.set('view engine', 'ejs');
       // Include partials middleware into the server
       server.use(partials());
    });
    

    In your .ejs views, enjoy the luxury like so...

    <%- include ../partials/header %>
    
    <section id="welcome">
      Welcome
    </section>
    
    <%- include ../partials/footer %>
    

    Also, rather than setting the ejs module to read .html just follow this answer to get eclipse to render .ejs as .html. how do i get eclipse to interpret .ejs files as .html?

    As an example, this is how a basic express structure is setup...

    project
    --public
    --views
    ----layout.ejs
    ----index.ejs
    ----partials
    ------partial1.ejs
    --server.js
    

    server.js would look like...

    var express  = require('express'),
        partials = require('express-partials'),
        http     = require('http'),
        path     = require('path');
    
    var app = express();
    
    // all environments
    app.configure(function() {
      app.set('port', process.env.PORT || 3838);
      app.set('views', __dirname + '/views');
      app.set('view engine', 'ejs');
    
      // Middleware
      app.use(partials());
      app.use(express.favicon());
      app.use(express.logger('dev'));
      app.use(express.json());
      app.use(express.urlencoded());
      app.use(express.methodOverride());
      app.use(app.router);
      app.use(express.static(path.join(__dirname, 'public')));
    });
    
    http.createServer(app).listen(app.get('port'), function(){
      console.log('App listening on port ' + app.get('port'));
    });
    

    Your route would look like...

    server.get("/", function(req, res) {
      res.render("index");
    });
    

    And finally, your layout.ejs...

    <html>
      <head>
        <title></title>
      </head>
    
      <body>
        <%- body %>
      </body>
    </html>
    

    and index.ejs ...

    <div id="index">
      <%- include partial1.ejs %>
    </div>
    

    If you need a reference to the working example, here it is