it-swarm.com.de

Knoten + Express mit statischem HTML. Wie routen Sie alle Anfragen zu index.html?

Ich arbeite an einer Web-App mit einer einzigen Seite und verwende Node + Express und Handlebars für das Templating. Momentan funktioniert alles gut mit index.html, das von einer ziemlich standardmäßigen server.js-Datei bereitgestellt wird:

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

Dies funktioniert perfekt beim Laden von http://localhost:10001/. Mein Problem ist, dass ich Push-Status in der App verwende. Der Browser zeigt möglicherweise eine URL wie http://localhost:10001/foo/bar an. Wenn ich die Seite aktualisiere, wird der Fehler Cannot GET /foo/bar angezeigt, da dafür keine Route vorhanden ist.

Also meine Frage, und verzeihen Sie mein unglaubliches Noobishness, wenn es um Node geht. Kann ich es so machen, dass alle Anfragen zu index.html führen? Das JavaScript in meiner App kann den richtigen Inhalt anzeigen, der auf URL-Parametern beim Laden der Seite basiert. Ich möchte keine benutzerdefinierten Routen definieren, da die Anzahl groß ist und sich die Pfade für sie dynamisch ändern können.

31
JPollock
const express = require('express')
const server = express()

/* route requests for static files to appropriate directory */
server.use('/public', express.static(__dirname + '/static-files-dir'))

/* other routes defined before catch-all */
server.get('/some-route', (req, res) => {
  res.send('ok')
})

/* final catch-all route to index.html defined last */
server.get('/*', (req, res) => {
  res.sendFile(__dirname + '/index.html');
})

const port = 8000;
server.listen(port, function() {
  console.log('server listening on port ' + port)
})
34
cdock
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));
7
Deepak

Dieses Muster dient statischen Assets, bevor es auf die Catch-All-Route Ihrer Front-End-Anwendung trifft. Um weitere Routen zu registrieren, fügen Sie diese einfach über der Catch-All-Route hinzu.

var express = require('express');
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
Nick Tomlin

Diese kurze Sache wird funktionieren:

import express from "express";

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

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

Stellen Sie nur sicher, dass alle URLs aus Ihren HTML/JS-Dateien jetzt absolut sind, da alle Ressourcen, die nicht vorhanden sind, eine index.html-Datei zurückgeben.

Express v 4.15.2

3
ZitRo
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);
});
1
vodolaz095