PageJs pretty URLs in Polymer aren't working

1
votes

I'm having some difficulties to use pretty Urls in my application which is Polymer 100% app and powered by Firebase. It's based on Polymer Starter Kit 1.2.0.

I'm wanting to access the route localhost:5000/user/edit. If I'm in the home page (localhost:5000) and click in a button with a href="/user/edit" it works fine. But, if I refresh the page of if I go directly to the "/user/edit" route without passing by the home page, appears a lot of problems related to find the files. The console shows the following:

edit:36 GET http://localhost:5000/user/styles/main.css  edit:37 GET
http://localhost:5000/user/styles/pikaday.css  edit:41 GET
http://localhost:5000/user/bower_components/webcomponentsjs/webcomponents-lite.js
edit:45 GET http://localhost:5000/user/elements/elements.html 404 (Not
Found)

My app.js file has only these lines:

var app = document.querySelector('#app');
app.baseUrl = '/';

And my routing.html is:

<script>
window.addEventListener('WebComponentsReady', function() {

// Removes end / from app.baseUrl which page.base requires for production
if (window.location.port === '') {  // if production
  page.base(app.baseUrl.replace(/\/$/, ''));
}

// Routes
page('/', function() {
  app.route = 'home';
});

page(app.baseUrl, function() {
  app.route = 'home';
});

page('/user/edit', function() {
  app.route = 'user/edit';
});

page('*', function() {
  console.info('404 page');
  page.redirect(app.baseUrl);
});

// add #! before urls
page({
  hashbang: false
});
});
</script>

I tried a lot of things:

  • If I change the route /user/edit to user-edit, it works fine. Apparently the problem is related to the '/' in the route.
  • If I set hashbang to true, it also works fine. But, I'm really wanting to work pretty URLs in my application.
  • If in the index.html I change <link rel="import" href="elements/elements.html"> to <link rel="import" href="/elements/elements.html"> the browser finds all the elements, but routing continues with the same problem.

Any ideas about how to solve this problem? I believe that it will help a lot of people who also wants to work with pretty URLs

3
routingpolymerpolymer-starter-kit

3 Answers

3
votes

I discovered the problem! There's a important detail in the documentation about using firebase pretty URLs that was missing in the documentation.

According to the documentation: https://github.com/PolymerElements/polymer-starter-kit/blob/master/docs/deploy-to-firebase-pretty-urls.md

There's a important step: 7. Add <base href="/"> to head in index.html

But, the detail is that the tag <base href="/"> should be added in the begging of the head and before the others imports. The problem is that I had put this in the end of the <head>, so I just put it in the beginning and started working fine.

After wasting a lot of time with this detail, I made a suggestion to the Polymer Startet Kit to improve the doc: https://github.com/PolymerElements/polymer-starter-kit/issues/670

Hope this doubt will help more people :)

1
votes

This is a server-side problem. Basically, you'll have to enable support for HTML5's pushstate on your server. If you are using apache, you can edit your .htaccess file like this one. For Nginx, you can refer to this one.

0
votes

I think the problem with app or router page.js. Because when you click on button, uri /user/edit add to your host localhost:5000. But when you reload a page, the host is disappear. First, delete this section and try again:

page(app.baseUrl, function() {
  app.route = 'home';
});