L'actualisation de page renvoie un 404error avec Polymer Firebase (ne peut pas trouver la page routée)

Dans mon projet actuel avec Polymer & Firebase J'ai le problème que sur la page d'actualisation aucune de mes pages routées se trouve 404. J'ai créé un nouveau projet qui produit la même erreur et hébergé avec Firebase.

Je fais usage de l'authentification google et après une inscription réussie, je charge mon application qui est fondamentalement le stater-kit Polymer. Je crois que le problème est la structure de mes pages/projets. Parce que my-app est juste la passerelle vers mon-site qui contient le routage et les pages correspondantes. J'ai ajouté une image ci-dessous pour expliquer comment mon projet est structuré. J'ai également ajouté une image de la source dans ma console. ceux qui sont routés vers la page et un lorsque la page a été rechargée.

L'actualisation de page renvoie un 404error avec Polymer Firebase (ne peut pas trouver la page routée)

J'apprécierais vraiment si quelqu'un trouve le temps de regarder ce

Image de ma structure de projet

image de ma console

fichier firebase.json

{ 
    "database": { 
    "rules": "database.rules.json" 
    }, 
    "hosting": { 
    "public": "public" 
    } 
}

fichier firebase.json de mon projet réel avec même problème

{ 
    "database": { 
    "rules": "database.rules.json" 
    }, 
    "hosting": { 
    "public": "public", 
    "rewrites": [ 
    { 
    "source": "**/!{*.*}", 
    "destination": "/index.html" 
    } 
    ] 
    } 
}

Code pour mon index.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>polyfire</title> 
    <link rel="import" href="my-app.html"> 
    <style media="screen"> 
    body { 
    font-family: Roboto, Arial, sans-serif; 
    } 
    </style> 
</head> 
<body> 
    <my-app></my-app> 
</body> 
</html>

Code pour mon my-app.html

<link rel="import" href="my-login.html"> 
<link rel="import" href="my-site.html"> 

<dom-module id="my-app"> 
<template> 
    <style> 
    :host { 
     display: block; 
    } 
    </style> 

    <firebase-app 
    auth-domain="firebaseapp.com" 
    database-url="firebaseio.com" 
    api-key="..." 
    storage-bucket="gs://yole.appspot.com"> 
    </firebase-app> 

    <firebase-auth user="{{user}}"></firebase-auth> 

    <template is="dom-if" if="[[!user]]"> 
    <my-login></my-login> 
    </template> 

    <template is="dom-if" if="[[user]]"> 
    <my-site></my-site> 
    </template> 

</template> 

<script> 
    Polymer({ 
    is: 'my-app', 
    properties: {}, 
    }); 
</script>

Code de ma-login.html

<dom-module id="my-login"> 
<template> 
    <style> 
    :host { 
     display: block; 
    } 
    </style> 

    <firebase-auth 
    id="auth" 
    user="{{user}}" 
    status-known="{{statusKnown}}" 
    provider="google" 
    on-error="handleError"></firebase-auth> 

    <paper-button class="logInOutBtn" raised on-tap="login" hidden$="[[user]]">Sign-up with Google</paper-button> 
    <paper-button class="logInOutBtn" raised on-tap="logout" hidden$="[[!user]]">Sign-out</paper-button> 

</template> 

<script> 
    Polymer({ 
    is: 'my-login', 

    properties: { 
     user: { 
     type: Object, 
     }, 
     statusKnown: { 
     type: Object, 
     } 
    }, 
    login: function() { 
     this.$.auth.signInWithPopup(); 
    }, 
    logout: function() { 
     this.$.auth.signOut(); 
    }, 

    }); 
</script> 
</dom-module>

Source

2017-01-30 Niklas

D'après ce que je comprends, vous n'êtes pas réécrire vos URL au niveau du serveur. Ainsi, lorsque vous passez de la page d'accueil à d'autres itinéraires, cela fonctionne, mais si vous souhaitez accéder à une page spécifique sans passer par la page d'accueil, cela échoue car le serveur ne sait pas de quelle route vous parlez. .

Si vous utilisez firebase serve, vous pouvez laisser l'URL réécriture happen like so après avoir indiqué ceci dans le firebase.json:

{ 
    "database": { 
    "rules": "database.rules.json" 
    }, 
    "hosting": { 
    "public": "app", 
     "rewrites": [{ 
     "source": "**", 
     "destination": "/index.html" 
    }] 
    } 
}

En fonction de votre configuration, vous pourriez avoir à changer les valeurs ci-dessus. Mais l'accent est la partie rewrites.

Une autre approche.

Si vous utilisez quelque chose comme Gulp pour servir votre site, vous voudrez peut-être aussi regarder comment réécrire l'URL à ce niveau. image See this for a complete, mais en bref:

gulp.task('serve', function() { 
    browser.init({ 
     server: 'app/', 
     port: port, 
     middleware: [historyApiFallback()] // See link above for details 
    }); 
    ..... 
});

Je ne sais pas comment vous allez finir par le déploiement de votre application, mais la ligne de fond pourrait être de réécrire les URL.

Source

2017-01-30 20:06:04 Rexford

merci beaucoup pour cette réponse rapide. J'ai eu le sentiment que le problème est lié à cela mais pas assez d'expérience pour savoir ce qui se passe exactement là-bas. Je déploie mon application avec firebase déployer le lien dans la question. J'ai mis à jour ma question et inclus mon fichier firebase.json. – Niklas

@NiklasLang Si vous déployez avec Firebase, vérifiez mon fichier 'firebase.json' et voyez comment les réécritures sont faites, et essayez avec votre configuration si cela fonctionne. – Rexford

L'homme que vous êtes une réponse très rapide de la vie et en plus il a résolu mon problème sur l'application de test et mon application réelle. Merci – Niklas

L'actualisation de page renvoie un 404error avec Polymer Firebase (ne peut pas trouver la page routée)

Répondre

Questions connexes