0

I am trying to learn Express with NodeJS and would like to render my views with plain HTML. I hacked together a webserver based on the Express API documentation and several Stack questions, particularly the answer by Andrew Homeyer in this question which states

You can have jade include a plain HTML page:

in views/index.jade

include plain.html in views/plain.html

... and app.js can still just render jade:

res.render(index)

My directory structure looks like this

Project
  *web.js
  Public
      img
      js
      lib
        gallerific
          *jquery.opacityrollover.js
          *jquery.gallerific.js
        angular
      theme
      views
        partials
        *index.html
        *index.jade

and my server looks like this.

var express = require('express'),
    jade = require('jade');

var app = module.exports = express();

app.configure(function(){
    app.set('views', __dirname + '/public/views');
    app.use("/public/lib", express.static(__dirname + "/public/lib"));
    app.use(express.static(__dirname + '/public'));
    app.use(express.bodyParser());
    app.use(express.methodOverride());
    app.set('view engine', 'jade')
    app.use(express.bodyParser());
});


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

app.get('/partials/:name',  function(req, res){
    var name = req.params.name;
    res.render('/public/partials/' + name);
});

app.get('/public/data/:name',  function(req, res){

    var name = req.params.name;
    res.json('/public/data/' + name)

});

app.listen(3000, function(){
    console.log("Express app listening on port %d in %s mode", this.address().port, app.settings.env);
});

What I am seeing is that certain files fail to load from directories in which everything else loads just fine. For example, my Gallery page fails to load the jquery.gallerific.js javascript file from my lib/gallerific directory while it does load the jquery.opacityrollover.js. I have poked around with Chrome Developer Tools and see the following

enter image description here

I had this site working with the Angular Bootstrap webserver so it doesn't seem to be a javascript error with the client side code. Does anyone know what I might doing that would cause this problem?

The source is available at https://github.com/jamesamuir/express-simple-html.git

Community
  • 1
  • 1
jamesamuir
  • 1,397
  • 3
  • 19
  • 41
  • 1
    Can you post the HTML/javascript which defines the image location? – Devin Lynch Jun 03 '13 at 01:47
  • 1
    Please mention what resource was not found. – user568109 Jun 03 '13 at 13:34
  • 1
    Try deleting the line containing `app.use("/public/lib", express.static(__dirname + "/public/lib"));`. – veidelis Jun 03 '13 at 13:57
  • The resource that was not found is . I tried removing the line as veidelis suggested but it did not seem to rectify the problem. – jamesamuir Jun 03 '13 at 16:44
  • I am also seeing that my path for the resource in Chrome Developer Tools is GET http://localhost:3000/undefined 404 (Not Found). I'm not sure why it would be undefined when it is explicitly stated and is loading other libraries from that location. – jamesamuir Jun 03 '13 at 16:59

1 Answers1

0

I figured it out. It turns out I had to resolve paths that I had forgotten about so that Express could render them correctly. It wasn't that the Gallerific javascript library didn't load, it was throwing an error on the image source of undefined for my gallery images (I am pulling them from a JSON file).

Once I put the appropriate paths in for the images and the data file, everything started working again. Thanks to everyone who provided a suggestion for me. It really helped me to work through the problem.

jamesamuir
  • 1,397
  • 3
  • 19
  • 41