web-dev-qa-db-fra.com

Node + Express avec HTML statique. Comment router toutes les requêtes vers index.html?

Je travaille sur une application Web d'une seule page utilisant Node + Express et un guidon pour la création de modèles. Tout fonctionne actuellement bien dans index.html, qui est servi dans un joli fichier 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);
});

Cela fonctionne parfaitement lors du chargement depuis http://localhost:10001/. Mon problème est que j'utilise les états Push dans l'application, de sorte que le navigateur peut afficher une URL telle que http://localhost:10001/foo/bar, puis si j'actualise la page, j'obtiens l'erreur Cannot GET /foo/bar car il n'y a pas de route pour cela.

Donc, ma question, et excusez mon incroyable noblesse en ce qui concerne Node, puis-je faire en sorte que toutes les demandes soient acheminées vers index.html? Le code JavaScript de mon application peut gérer l'affichage du bon contenu en fonction des paramètres d'URL lors du chargement de la page. Je ne veux pas définir d'itinéraires personnalisés, car leur nombre serait important et les chemins correspondants pourraient changer de manière dynamique.

javascriptnode.jsexpress
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

Ce modèle servira les actifs statiques avant de frapper la route fourre-tout qui sert votre application frontale. Pour enregistrer des itinéraires supplémentaires, ajoutez-les simplement au-dessus de l'itinéraire à tout faire.

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

Cette petite chose va marcher:

import express from "express";

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

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

Assurez-vous simplement que toutes les URL de vos fichiers HTML/JS sont absolues, car toutes les ressources qui n'existent pas renverront le fichier index.html.

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