Page refresh returns a 404error with Polymer Firebase (can't find routed page)

Question

In my current project with Polymer & Firebase I am having the issue that on page refresh none of my routed pages gets found 404. I created a new project that produces the same error and hosted it with firebase.

I make use of google authentication and after a successful sign-up I load my application which is basically the Polymer stater-kit. I believe that the problem is the structure of my pages/project. Because my-app is just the gateway to my-site which holds the routing and the corresponding pages. I added a image below to explain how my project is structured. I also added picture of the source in my console. ones when routed to the page and one when the page was reload.

I would really appreciate if someone finds the time to look at this

Picture of my project structure

Picture of my console

firebase.json file

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

firebase.json file from my actual project with same problem

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

Code for my 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 for my 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 of my-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>

Answer 1

From what I understand, you're not rewriting your URLs at the server level. Thus, when you're moving from the homepage to other routes, it works, but if you wish to get to a specific page without going through the homepage, it fails, because the server doesn't know what route you're talking about.

If you use firebase serve , you can let the URL rewriting happen like so after specifying this in the firebase.json :

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

Depending on your configuration, you might have to change the values above. But the focus is the rewrites part.

Another approach.

If you're using something like Gulp to serve your site, you might wanna take a look at how to do URL rewriting at that level too. See this for a complete picture, but in short:

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

I don't know how you'll end up deploying your app, but the bottom line might be to rewrite the URLs.

Page refresh returns a 404error with Polymer Firebase (can't find routed page)

Question

1 answers

solution1
1 ACCPTED 2017-01-30 20:06:04

Page refresh returns a 404error with Polymer Firebase (can't find routed page)

Question

1 answers

solution1 1 ACCPTED 2017-01-30 20:06:04

solution1
1 ACCPTED 2017-01-30 20:06:04