What is the best practice for serving html in node.js with express.js?

Question

I currently am serving all my html right in my app.js/server.js file like this:

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

I imagine if I have 15+ html pages that this is probably not the best way to call them. Is there a better way to serve them from another file or location and using export or something to be able to call just one function or something on app.js. It might be what the routing is for but maybe I do not understand it too well.

(added more code that is in the same file)

app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/public');

// used below code to render html files
app.engine('html', require('ejs').renderFile);

app.set('view engine', 'ejs');
app.use(express.favicon("public/img/favicon.ico"));
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

this is more of an express.js question than node.js, adding tag and rephrase question. — Vicary, May 16 '13 at 17:43

Alberto Zaccagni · Accepted Answer · 2013-05-16T19:56:04.513

75

You could use the static middleware:

app.use("/", express.static(__dirname));

A server example:

var express = require('express');
var app = express();
app.use('/', express.static(__dirname + '/public'));
app.listen(3000, function() { console.log('listening')});

This is the file structure:

.
├── public
│   ├── a.html
│   ├── b.html
│   └── c.html
└── server.js

Documentation:

edited May 16 '13 at 19:56

answered May 16 '13 at 17:26

Alberto Zaccagni

30,779
11
72
106

Does that call a get on all the rest of the pages or do I still have to use app.use("/about" ...) and so on? If not then how does it know from just that one line to get the rest of the pages? – May 16 '13 at 17:43
If you for example write `app.use("/", express.static(__dirname + '/public'));` all files in the `public` folder will be server. – Alberto Zaccagni May 16 '13 at 17:47
Also, added more files above for what I already have that might be similar (as I am using a static call. – May 16 '13 at 17:48
1

I tried that but it only gets the index and everything else has a 404 error with the page not loading. – May 16 '13 at 17:51
Try to isolate the part that serves the files, maybe write a small server for that, so you get a grasp of it. – Alberto Zaccagni May 16 '13 at 17:57
I am confused about how to do that? I am trying different ways of trying to include what you said but having trouble getting any page to work beside the index even though I am calling the directory. Do you think any of the other code I added above that is in my app.js file is countering the static call? – May 16 '13 at 18:06
I have included an example, this is correctly serving each html file for me, try following that. – Alberto Zaccagni May 16 '13 at 19:56
I see that it works, but the problem now lies that I have to have about.html in the extension for the page to load, as oppose to /about for example. – May 16 '13 at 21:08
I remember connect having url rewrite capabilities, you could try looking at that. – Alberto Zaccagni May 16 '13 at 21:13
ok thanks I will look into it, one last thing is the way I originally wrote it less efficient btw? – May 16 '13 at 21:43
I don't know, I think not... but you could write a benchmark for that, one server with my example and one with yours :D – Alberto Zaccagni May 16 '13 at 22:15
haha kk, because I was reading about static pages constantly having to pull where the way I wrote it might just pull it off the cache or something like that... – May 16 '13 at 22:50

score 6 · Answer 2 · answered May 16 '13 at 19:54

One idea would be to use a catch-all kind of route as the last route, like the following:

app.get('/:page', function(req, res) {
  res.sendfile(path.join(__dirname, 'public', 'pages', path.basename(req.params.page) + '.html'));
});

That would require that you put your .html files into public/pages/about.html, etc.

You might want to switch the order of the static file router so that static files get precedence over routes, too, unless you want that route catching things in the public folder, like this:

app

app.set('view engine', 'ejs');
app.use(express.favicon("public/img/favicon.ico"));
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.static(path.join(__dirname, 'public')));
app.use(app.router);

What is the best practice for serving html in node.js with express.js?

2 Answers2

Linked

Related