Node + Express mit statischem HTML. Wie leiten Sie alle Anfragen an index.html weiter?

Question

Ich arbeite an einer einzigen Seite Web-App mit Node + Express und Handelbars für die Tempalierung. Alles, was zur Zeit funktioniert gut von einem index.html, die aus einer ziemlich Standard server.js Datei serviert:

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); 
}); 

Das funktioniert perfekt, wenn sie von http://localhost:10001/ geladen. Mein Problem ist, dass ich Push-Zustände in der App verwende, daher zeigt der Browser möglicherweise eine URL wie http://localhost:10001/foo/bar und wenn ich die Seite aktualisiere, bekomme ich den Fehler Cannot GET /foo/bar, da es keine Route dafür gibt.

Also meine Frage, und verzeihen Sie meine unglaubliche noobishness, wenn es um Knoten geht, kann ich es so alle Anfragen Route zu index.html machen? Das JavaScript in meiner App kann mit dem Anzeigen des richtigen Inhalts basierend auf URL-Parametern beim Laden der Seite umgehen. Ich möchte keine benutzerdefinierten Routen definieren, da die Anzahl groß wäre und sich die Pfade für sie dynamisch ändern könnten.

Answer 1

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); 
}); 

Answer 2

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); 
}); 

Answer 3

wird dieses Muster statische Vermögenswerte dienen, bevor Sie die Catch-all Strecke schlagen, die Front-End-Anwendung serviert. Um zusätzliche Routen zu registrieren, fügen Sie sie einfach oberhalb der Sammelroute hinzu.

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); 
}); 

Answer 4

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)); 

Answer 5

Dies wird kurz Sache arbeiten:

import express from "express"; 

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

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

einfach sicher stellen, dass alle URLs Ihrer HTML/JS-Dateien jetzt absolut sind, da alle Ressourcen, die nicht zurückkehren tut existiert index.html Datei .

Express v 4.15.2