Serving a static html file from Express 4 - node.js

Question

I want to serve a single html page using express 4. It was used to possible with previous versions of Express but now it tells me "No default engine was specified and no extension was provided". Many thanks in advance.
var express = require('express');
var path = require('path');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var app = express();
var router = express.Router();
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static( path.join(__dirname, 'public')));
router.get('/', function(req, res) {
res.render('public/main.html');
});
module.exports = app;
library info below
"dependencies": {
"express": "~4.9.0",
"body-parser": "~1.8.1",
"cookie-parser": "~1.3.3",
"morgan": "~1.3.0",
"serve-favicon": "~2.1.3",
"debug": "~2.0.0",
"jade": "~1.6.0"
},
Below is the same example using Express 3 and it works as I would expect.
var express = require('express');
var path = require('path');
var app = express();
app.use(express.static(path.join(__dirname, 'public')));
app.get("/", function (req, res) {
res.sendfile('public/main.html');
});
module.exports = app;
Below is the correct way for serving a static html from Express 4. Thanks to E_net4 and NarendraSoni for their answers (1 and 2). For it to work you have to avoid using Express' router i.e. express.Router().get('/') as it will invoke the Express application's template engine.
var express = require('express');
var path = require('path');
var app = express();
app.use(express.static( path.join(__dirname, 'public')));
app.get('/', function(req, res) {
res.sendfile('public/main.html');
});
module.exports = app;

Answer 1

res.render would invoke the Express application's template engine, but you haven't specified one.
Express provides a sendFile function in the response object, which allows you to send static page files without passing through a template engine.
var router = express.Router();
router.get('/', function(error, res) {
var options = {root: __dirname};
res.sendFile('something.txt', options, function(error) {
if (error) {
res.writeHead(500);
res.end();
}
});
});
There's something else that looks fishy in your code. You have created a router, but you didn't show where it was included in your application. It may be happening that some other middleware that relies on a template engine is intercepting the request.
app.use('/', router);
Also note that you do not need to create a new router in this case. An Application already behaves like a Router.

Answer 2

You are doing everything right, except that there is a very minor mistake. :)
edit your route definition as :
app.get('/', function(req, res) {
res.sendFile('main.html');
});
Now since you have already included :
app.use(express.static(path.join(__dirname, 'public')));
so you don't need to append public with your main.html.
That's it, enjoy, your code should work now.

Answer 3

If you just need to serve one file, you can replace your router with:
var fs = require('fs');
router.get('/', function(req, res) {
fs.readFile('public/main.html', function (err, html) {
res.writeHeader(200, {"Content-Type": 'text/html'});
res.write(html);
res.end();
});
});

Answer 4

Techically speaking, if you only want to serve static html files, you only need this line:
app.use(express.static( path.join(__dirname, 'public')));
meaning that if you were to GET /main.html from your root directory, it would be statically served without having to type any further code.
By using:
app.get('/', function(req, res) {
res.sendFile('main.html');
});
You are using routes that are defined for the root of the express application, instead of the Router(), as explained in the express docs here:
A route method is derived from one of the HTTP methods, and is attached to an instance of the express class.
The following code is an example of routes that are defined for the
GET...methods to the root of the app.
// GET method route
app.get('/', function (req, res) {
res.send('GET request to the homepage');
});
So what's happening here is that you are using routes defined for the root of the express application, instead of routes defined for the express.Router().
If you wanted to use the Router() to route things the same way, you could try code like this:
//app.use(express.static(path.join(__dirname, 'public')));
var router = express.Router();
app.use('/', router);
/* GET home page. */
router.get('/', function(req, res) {
res.sendFile(__dirname + '/path/to/file.html');
});
So, you do not have to avoid using the express.Router(), you just have to use routes from the root of your express app, OR routes from the express.Router() in a slightly different way