Serving Polymer app-geroutete Seiten mit express.js?

Question

Ich habe eine Reihe von Seiten basierend auf dem Polymer-Starter-Kit, die gut mit polymer serve funktionieren. Allerdings muss ich einige Ajax-Anfragen über einen Server für Datenbankabfragen senden, so dass ich meinen eigenen Server-Code mit express.js schreiben musste. Mein Problem ist, dass, wenn ich eine Seite, die nicht root ist und aktualisieren, ich die Nachricht oder was auch immer die/Seite Name ist. Meine index.html Seite verweist auf eine container.html als normal, den app-Route-Code hat, wie folgt:

<app-location route="{{route}}"></app-location> 
    <app-route 
     route="{{route}}" 
     pattern="/:page" 
     data="{{routeData}}" 
     tail="{{subroute}}"></app-route> 

... 

<app-drawer id="drawer"> 
     <app-toolbar>Menu</app-toolbar> 
     <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation"> 
      <a name="view-1" href="/view-1">View One</a> 
      <a name="bugs" href="/bugs">Bugs</a> 
     </iron-selector> 
     </app-drawer> 

... 

<iron-pages 
      selected="[[page]]" 
      attr-for-selected="name" 
      fallback-selection="view-404" 
      role="main"> 
      <view-1 name="view-1"></view-1> 
      <bugs-view name="bugs"></bugs-view> 
     </iron-pages> 

Mit anderen Worten, es ist fast genau die gleiche wie in dem Standard-Polymer-Starter-Kit. Mein Server-Code lautet wie folgt:

var express = require('express'); 
var path = require('path'); 
var mysql = require('mysql'); 

var connection = mysql.createConnection({ 
    host  : 'host', 
    user  : user, 
    password : password, 
    database : 'db' 
}); 
connection.connect(); 
var app = express(); 

app.get('/sql', function(req,res) { 
    //console.log(req.query.query); 
    connection.query(req.query.query, function(error, results, fields) { 
     if (error) {console.log(error); throw error;} 
     else { 
      res.send(results); 
     } 
    }.bind(this)); 
}); 

app.use(express.static(__dirname)); 
app.use(express.static(__dirname+'/src')); 
app.listen(8080); 

console.log("Server listening on localhost:8080"); 

I localhost:8080 fein laden kann, und navigieren Sie zu den Seiten ganz gut, aber wenn ich versuche, auf jeder Seite zu aktualisieren, aber root es gibt mir die Cannot GET /page Fehler. Dies hat die Entwicklung machte eine intensiv frustrierende Erfahrung ...

Answer 1

versuchen, dies zu Ihrer Server-Konfiguration hinzu:

app.get('*', function(req, res) { 
    res.sendfile('./public/index.html', {root: '.'}); 
}); 

Statt ./public/index.html den Pfad index.html

dies von AFTER alle Put für Ihre setzen Sie Ihre andere Routen, so dass es sie nicht überschreibt. Auf diese Weise sendet Ihr Server, egal welche Seite Sie neu laden, immer noch Ihren "Startpunkt", der dann natürlich all Ihre Javascript und CSS einlesen wird. Nach all diesen, einmal eckigen Bootstraps übernimmt der Router die Kontrolle und bringt Sie dahin, wo Sie sein sollten.