2

I'm trying to deliver a static html file which uses jquery and other libraries and i want to know how to do his with express.

Here's my app.js code ( express server file )

var express = require('express') 
 , routes = require('./routes') 
var app = module.exports = express.createServer(); 
app.configure(function(){ 
 app.set('views', __dirname + '/views'); 
 app.use(express.static(__dirname + '/public')); 
}); 

app.configure('development', function(){ 
 app.use(express.errorHandler({ dumpExceptions: true, showStack: 
true })); 
}); 

app.configure('production', function(){ 
 app.use(express.errorHandler()); 
}); 

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

app.listen(3000); 

and my index.html is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// 
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<link rel='stylesheet' type='text/css' href='theme.css' /> 
<link rel='stylesheet' type='text/css' href='fullcalendar.css' /> 
<link rel='stylesheet' type='text/css' href='fullcalendar.print.css' 
media='print' /> 
<script type='text/javascript' src='jquery-ui-1.8.11.custom.min.js'></ 
script> 
<script type='text/javascript' src='jquery-1.5.2.min.js'></script> 
<script type='text/javascript' src='fullcalendar.min.js'></script> 
<script type='text/javascript'> 
       $(document).ready(function() { 
               $('#calendar').fullCalendar({ 
                       theme: true, 
                       header: { 
                               left: 'prev,next today', 
                               center: 'title', 
                               right: 'month' 
                       }, 
                       editable: true, 
                       events: { url : 'http://localhost:5555/'}, 
                       firstDay : 1, 
                       weekends : true 
               }); 
       }); 
</script> 
<style type='text/css'> 
       body { 
               margin-top: 40px; 
               text-align: center; 
               font-size: 13px; 
               font-family: "Lucida 
Grande",Helvetica,Arial,Verdana,sans-serif; 
               } 
       #calendar { 
               width: 900px; 
               margin: 0 auto; 
               } 
</style> 
</head> 
<body> 
<div id='calendar'></div> 
</body> 
</html> 

and when i run my server and point my browser to it, i get foll error

Error: D:\Workspace\nodejs\test\my-server/views/index.html:12 
   10| <script type='text/javascript'> 
   11| 
 > 12|         $(document).ready(function() { 
   13| 
   14|                 $('#calendar').fullCalendar({ 
   15|                         theme: true, 
unexpected token "indent" 
   at Object.parseExpr (D:\Workspace\nodejs\test\my-server 
\node_modules\jade\lib\parser.js:228:15) 
   at Object.parse (D:\Workspace\nodejs\test\my-server\node_modules 
\jade\lib\parser.js:129:25) 
   at parse (D:\Workspace\nodejs\test\my-server\node_modules\jade\lib 
\jade.js:101:62) 
   at Object.compile (D:\Workspace\nodejs\test\my-server\node_modules 
\jade\lib\jade.js:148:9) 

I did initial googling, but coudn't figure much.. can somone let know wht's happening. Thanks

JWhiz
  • 681
  • 3
  • 10
  • 22

3 Answers3

3

just for anyone who is going though this . You are most probably following the example over here .

https://github.com/visionmedia/express/blob/master/examples/ejs/index.js

and event if your not and still interested in serving html files . then all you need to do is use ejs .

if your project is not using jade templates then just edit you package.json file from this :

"jade": "*"

to this

"ejs": "*"

and then your all good to go with the following app.js configuration :

app.engine('.html', require('ejs').__express);

app.set('view engine', 'html');

sure thing order is important .

Hussein Nazzal
  • 2,557
  • 18
  • 35
3

The problem lies in the connection of .html with the jade template engine. Jade requires the 'html' file to look like this:

!!! 5
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript')
      if (foo) {
         bar()
      }
  body
    h1 Jade - node template engine
    #container
      - if (youAreUsingJade)
        p You are amazing
      - else
        p Get on it!

and in your case the jade engine tries to parse your HTML file as a jade template and chokes. If you really want to server a pure HTML file, you can take a look at this answer.

Community
  • 1
  • 1
topskip
  • 16,207
  • 15
  • 67
  • 99
  • i had seen that post and that didn't work either.. albeit reading from file system works. using (fs.readfile) . I wanted to know if there is a simple way of just serving html files. – JWhiz Jan 15 '12 at 14:05
2

res.render() is going to treat "index.html" as a template and try to process it through the templating engine (jade.) Since your HTML file is not a formatted template (it's just a static HTML file), you're getting errors.

If you want to simply serve the static file index.html, just put it in the static directory declared in app.use(express.static(__dirname + '/public')); and access it directly. Files in the static directory are not preprocessed. You may also need to configure the Express middleware if you're trying to do something more complex. Check out the end of the Middleware section at http://expressjs.com/guide.html#middleware

You could also read the file contents using the fs module and serve (which looks like is what you're currently trying to do), but that introduces unnecessary overhead:

//var fs = require('fs');
app.get('/html', function(req, res) { 
  res.writeHead(200, {'Content-Type': 'text/html'});
  var contents = fs.readFileSync("./public/index.html", "UTF-8");
  res.end(contents);
}); 
Jesse Fulton
  • 2,188
  • 1
  • 23
  • 28