Polymer pretty URL’s don’t work on refresh or manual nav, throws NGINX error

4/14/2017

When I land on my app the homepage works. When I manually navigate to a pretty URL like (like myapp.com/registration-page), I get:

404 Not Found nginx/1.11.5

When I navigate through the app using links/buttons within the app, it works fine until I refresh the page on a pretty URL. Then, I see the same error 404 Not Found nginx/1.11.5.  I’m currently using <app-location> and <app-route> for handling my routing.

Everything works fine in all browsers while I'm in dev mode with polymer serve. My GUESS is that it is a Polymer issue and not an nginx issue. Everything works fine in Chrome but does NOT work in Firefox or Safari. I’ve had a similar refreshing problem with an older version of Polymer many months ago. I solved it by setting the hashbang to false (in the routing.html file):

page({
      hashbang: false
    });

and I added <base href=“/" /> within the <head> tag of the index.html file, and it worked.

But now that I’ve used the new Polymer Starter Kit (polymer#^1.7.0) as the foundation of my app (although I’ve made a lot of changes). The project files in PSK are structured completely differently than the old Polymer where there was an app.js file and PageJs was used for routing.

Now there is no routing.html file, and I’m not sure what I need to change. I’ve already tried adding <base href=“/" /> to the index.html file, but it didn’t work.

*NOTE: If it helps I use Google Cloud Server and Docker containers + kubernetes to deploy my nginx.

Has anyone run into this problem before and know how to solve it?

-- nwammy
deployment
kubernetes
nginx
polymer
polymer-starter-kit

2 Answers

7/12/2017

To solve this I ended up just launching my entire Polymer frontend on App Engine, and while keeping my backend on Compute Engine.

-- nwammy
Source: StackOverflow

4/19/2017

So when you define an ingress for exposing your service outside the cluster you specify things like what service gets linked on what hostname.

So you specify ing.spec.backend.serviceName and ing.spec.backend.servicePort to be mapped to ing.spec.rules.host.

So if you hit the ingress using some other URL then the ingress might not know where(to which target service) to route your traffic to.

One workaround is that you can add one more entry in your ingress which maps the pretty url(in your case myapp.com) to the same service.

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: test
spec:
  rules:
  - host: old.com
    http:
      paths:
      - path: /registration-page
        backend:
          serviceName: my-app-svc
          servicePort: 80

  - host: myapp.com
    http:
      paths:
      - path: /registration-page
        backend:
          serviceName: my-app-svc
          servicePort: 80

Note in the above example the second entry's host is different.

Ingress docs: https://kubernetes.io/docs/concepts/services-networking/ingress/

-- surajd
Source: StackOverflow