Express nœud travaillé comme pushState serveur compatible servir toute ressource statique sans aucun préfixe de chemin

Question

Je suis la construction de la page web de l'application avec Ember.js ou Backbone.js en tant que front-end MVC, express.js(node.js) en tant que serveur back-end.

server/app.js code en bref

app.use(bodyParser.json());

app.use(express.static(path.join(__dirname, '..', 'client')));
app.get('*', function(req, res) {
  return res.render('base'); (will sendFile (client/index.html) )
});

Il vous permettra de charger jusqu'à la client/ dossier avec tous les biens publics, dossier client de la structure ressemble à ceci

- client
   -- index.html ( will be rendered as always )
   -- app (front end mvc code)
   -- assets
      -- images
      -- styles

Quand le html5 pushstate est activé par l'extrémité avant MVC, express serveur est toujours au service de tous l'itinéraire correspondant, ce qui à son tour rendre index.html comme toujours lorsque la page est actualisée ou url est insérée manuellement dans le navigateur.

client/index.html (exemple de code)

<link rel="stylesheet" href="assets/styles/reset.css">
<link rel="stylesheet" href="assets/styles/base.css">

Voici trois différentes URLs cas

localhost:3000/        (root)
localhost:3000/users  || localhost:3000/#/users (hard url)
localhost:3000/users/1    || localhost:3000/#/users/1  ( dynamic segment)

Quand j'ai défini aucune ressource statique comme chemin relatif, il fonctionne sur le chemin de la racine de l'url et url dur sur l'actualisation de la page, il sert ressources

GET /assets/styles/reset.css 304 1ms
GET /assets/styles/base.css 304 2ms

Mais quand je suis arrivé à localhost:3000/users/1 et actualisez la page, j'ai eu la mauvaise url de ressource, de sorte qu'il a échoué sur le chargement client/index.html depuis il n'y a pas de ressources dans ce chemin.

GET /users/assets/styles/reset.css 304 2ms
GET /users/assets/styles/base.css 304 6ms

Ensuite, j'ai changé de chemin d'accès absolu dans client/index.html (exemple de code)

<link rel="stylesheet" href="/assets/styles/reset.css">
<link rel="stylesheet" href="/assets/styles/base.css">

cela fonctionne bien, même dans le segment dynamique url localhost:3000/users/1, de toutes les ressources servir dans le bon chemin d'accès d'url.mais j'ai un code html img tag <img src="assets/images/icons/star.png" alt="star"> en front-end mvc modèle qui sera rendu lorsque l'application démarre.Lorsque je charge localhost:3000/users/1 sur l'actualisation de la page, voici ce que j'obtiens

GET /assets/styles/reset.css 304 1ms
GET /assets/styles/base.css 304 2ms
GET /users/assets/images/icons/star.png 304 5ms

J'ai essayé avec le chemin absolu et le chemin relatif dans l'extrémité avant modèle mvc (<img src="/assets/images/icons/star.png" alt="star">), il charge avec users préfixe n'importe quoi.

J'ai trouvé une solution par tbranyen, mais il n'a pas assez de travail pour moi.Je n'ai pas besoin de configuration du cluster à tous, est ce que je veux exprimer mon serveur pour servir de toutes les ressources, sans le préfixe lors de tout segment dynamique recherchée.J'ai donc écrit ce middleware, et des feux de les corriger, mais encore les charges de la ressource statique avec users/ préfixe.

// this route uses the ":user" named parameter
// which will cause the 'user' param callback to be triggered
router.get('/users/:user_id', function(req, res, next) {
  console.log('req.params: ', req.params.user_id );
  //console.log('@TODO: need to handle the params here');
  //next();
  return res.render('base');
});

Problème:

Lors de l'utilisation de Express.js en tant que serveur, je veux que chaque navigateur demande sera traitée avec la réponse client/index.html, même avec de requête dynamique du segment.Actuellement, chaque fois que l'url de requête implique des dynamiques de la requête segment /users/:user_id, la réponse de l'express serveur de préfixe users à toutes les ressources statiques.

Par exemple, lorsque je charge l'url avec le segment dynamique localhost:3000/users/1.si j'ai un ressources assets/images/icons/star.png au guidon de modèle, express server réponse en retour /users/assets/images/icons/star.png, mais je n'ai pas users dossier avec les actifs.Ce que je veux réponse en retour /assets/images/icons/star.png.

J'ai essayé avec le chemin absolu /assets/images/icons/star.png chemin d'accès relatif ou assets/images/icons/star.png dans le guidon modèle, il reviens toujours avec users préfixe dans la réponse.

Merci pour toute aide!

Answer 1

Dans le <head> de votre modèle de base, ajouter ce vers le haut:

<base href="/">