NodeJS: Render raw HTML with Express

What I think you are trying to say is: How can I serve static html files, right?

Let's get down to it.

First, some code from my own project:

app.configure(function() {
    app.use(express.static(__dirname + '/public'));
});

What this means that there is a folder named public inside my app folder. All my static content such as css, js and even html pages lie here.

To actually send static html pages, just add this in your app file

app.get('/', function(req, res) {
  res.sendfile(__dirname + '/public/layout.html');
});

So if you have a domain called xyz.com; whenever someone goes there, they will be served layout.html in their browsers.

Edit

If you are using express 4, things are a bit different. The routes and middleware are executed exactly in the same order they are placed.

One good technique is the place the static file serving code right after all the standard routes. Like this :

// All standard routes are above here
app.post('/posts', handler.POST.getPosts);

// Serve static files
app.use(express.static('./public'));

This is very important as it potentially removes a bottleneck in your code. Take a look at this stackoverflow answer(the first one where he talks about optimization)

The other major change for express 4.0 is that you don't need to use app.configure()

If you don't actually need to inject data into templates, the simplest solution in express is to use the static file server (express.static()).

However, if you still want to wire up the routes to the pages manually (eg your example mapping '/' to 'login.html'), you might try res.sendFile() to send your html docs over:

http://expressjs.com/api.html#res.sendfile

Have you tried using the fs module?

server.get('/', function(req, res) {
    fs.readFile('index.html', function(err, page) {
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.write(page);
        res.end();
    });
}

as the document says : 'Express expects: (path, options, callback)' format function in app.engin(...).

so you can write your code like below(for simplicity, but it work):

server
.set('view options', {layout: false})
.set('views', './../')
.engine('html', function(path, options, cb) {
    fs.readFile(path, 'utf-8', cb);
});

of course just like 2# & 3# said, you should use express.static() for static file transfer; and the code above not suit for production

First, the mistake you did was trying to use the express 2.x code snippet to render raw HTML in express 3.0. Beginning express 3.0, just the filepath will be passed to view engine instead of file content.

Coming to solution,

create a simple view engine

var fs = require('fs'); 

function rawHtmlViewEngine(filename, options, callback) {
    fs.readFile(filename, 'utf8', function(err, str){
        if(err) return callback(err);

        /*
         * if required, you could write your own 
         * custom view file processing logic here
         */

        callback(null, str);
    }); 
}

use it like this

server.engine('html', rawHtmlViewEngine)
server.set('views', './folder');
server.set('view engine', 'html');

Reference

Official express 2.x to 3.x migration guide

See 'Template engine integration' section in this url https://github.com/visionmedia/express/wiki/Migrating-from-2.x-to-3.x

After a fresh install of the latest version of Express

express the_app_name

Creates a skeleton directory that includes app.js.

There is a line in app.js that reads:

  app.use(express.static(path.join(__dirname, 'public')));

So a folder named public is where the magic happens...

Routing is then done by a function modeled this way:

app.get('/', function(req,res) {
      res.sendfile('public/name_of_static_file.extension');
    });

*Example:* An index.html inside the public folder is served when invoked by the line:

   app.get('/', function(req,res) {
  res.sendfile('public/index.html');
});

As far as assets go: Make sure the css and javascript files are called from the folder relative to the public folder.

A vanilla Express install will have stylesheets, javascripts, and images for starting folders. So make sure the scripts and css sheets have the correct paths in index.html:

Examples:

<link href="stylesheets/bootstrap.css" rel="stylesheet">

or

<script src="javascripts/jquery.js"></script>

You can render .html pages in express using following code:-

var app = express();

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

And while rendering, you can use following code:-

response.render('templates.html',{title:"my home page"});