Node + Экспресс со статическим HTML. Как перенаправить все запросы в index.html?

Я работаю над одностраничным веб-приложением, используя Node + Express и handelbars для tempalting. Все в настоящее время хорошо работает с index.html, который работает с довольно стандартным файлом server.js:

var express = require('express');

var server = express();
server.use(express.static(__dirname + '/public'));

var port = 10001;
server.listen(port, function() {
    console.log('server listening on port ' + port);
});

Это отлично работает при загрузке с http://localhost:10001/. Моя проблема заключается в том, что я использую состояния push в приложении, поэтому браузер может отображать URL-адрес, например http://localhost:10001/foo/bar, а затем, если я обновляю страницу, я получаю сообщение об ошибке Cannot GET /foo/bar, поскольку для этого нет пути.

Итак, мой вопрос, и простите мою невероятную нообильность, когда дело доходит до node, могу ли я сделать так, чтобы все запросы направлялись на index.html? JavaScript в моем приложении может обрабатывать отображение правильного содержимого на основе параметров URL-адреса при загрузке страницы. Я не хочу определять пользовательские маршруты, поскольку число будет большим, и пути для них могут динамически меняться.

Ответы

Ответ 1

var express = require('express');

var server = express();
server.use('/public', express.static(__dirname + '/public'));

server.get('/*', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

var port = 8000;
server.listen(port, function() {
  console.log('server listening on port ' + port);
});

Ответ 2

var app = express();

var options = {
  dotfiles: 'ignore',
  etag: true,
  extensions: ['htm', 'html'],
  index: 'index.html',
  lastModified: true,
  maxAge: '1d',
  setHeaders: function (res, path, stat) {
    res.set('x-timestamp', Date.now());
    res.header('Cache-Control', 'public, max-age=1d');
  }
};

app.use(compression());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(methodOverride());

app.use('/', express.static(__dirname + '/public', options));
app.use('*', express.static(__dirname + '/public', options));

Ответ 3

Этот шаблон будет обслуживать статические активы, прежде чем ударить по всему маршруту, который обслуживает ваше внешнее приложение. Чтобы зарегистрировать дополнительные маршруты, просто добавьте их выше маршрута catch-all.

var express = require('express');
var static = require('serve-static');
var server = express();

// middleware
server.use(express.static(__dirname + '/public'));

// routes
server.use('*', function (req, res) {
  // serve file
});

var port = 10001;
server.listen(port, function() {
  console.log('server listening on port ' + port);
});

Ответ 4

var express = require('express');

var server = express();
server.use(express.static(__dirname + '/public'));

server.get('*', function(req, res){
  res.sendFile('index.html');
});

var port = 10001;
server.listen(port, function() {
    console.log('server listening on port ' + port);
});

Ответ 5

Эта короткая вещь будет работать:

import express from "express";

const app = express(),
      staticServe = express.static(`${ __dirname }/public`);

app.use("/", staticServe);
app.use("*", staticServe);

Просто убедитесь, что все URL-адреса из ваших файлов HTML/JS являются абсолютными, так как все ресурсы, которые не существуют, вернут файл index.html.

Express v 4.15.2