Send Multiple Static Files with Express Router

Question

I'm trying to use the Express router to send static .html files based on the URL provided in router.get.

For example, this sends the homepage

router.get('/', function(req, res, next) {
res.sendFile('index.html');
});

And this sends the "about" page

router.get('/about', function(req, res, next) {
res.sendFile("about.html")
});

When the app first loads, it loads the index.html as expected. But for some reason, when I visit localhost:3000/about I get a 404 error. The about.html is definitely there though because I can go to localhost:3000/about.html and the page loads.

Here are some of my other Express files if that helps.

App.js (I used the express generator for this. Only added reference to express.static to reference the public folder)

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var users = require('./routes/users');
// var config = require('./config')['dev']

var app = express();
var http = require('http');

//Validate inputs
const { body,validationResult } = require('express-validator/check');
const { sanitizeBody } = require('express-validator/filter');

// view engine setup
// app.set('views', path.join(__dirname, 'views'));
// app.set('view engine', 'jade');

app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

//Setup public for static files
app.use(express.static(path.join(__dirname, 'public')));

//Use index file for router
app.use('/', index);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.send('You\'ve reached the end of the Internet :)')
});

module.exports = app;

index.js (includes express router)

var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var db= require('db')

// Routes
/* GET home page. */
router.get('/', function(req, res, next) {
  res.sendFile('index.html');
});

router.get('/about', function(req, res, next) {
  res.sendFile("about.html")
});

module.exports = router;

Any help provided is much appreciated!

Answer 1

Based on your description, it seems like your express.static() is loading index.html for you and is also making http://localhost:3000/about.html work for you. But, neither of your manually created routes actually would work because res.sendFile("about.html") doesn't reference a file in the right directory.

So, you would need to fix the path to that file:

router.get('/about', function(req, res, next) {
  res.sendFile(path.join(__dirname, "../public", "about.html"), {dotfiles: "allow"});
});

This assumes these files are in your public directory and that it's a sub-directory below __dirname (which it appears from your express.static() line of code), but if that's not the case, then just adjust the path in the above line of code to manually point at the public directory.

FYI, the reason that index.html works is because express.static() has special logic to look for index.html when the path is just / . But, /about won't automatically look for about.html .