1

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

Felipe César
  • 1,234
  • 2
  • 16
  • 34

3 Answers3

3

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 :)

Felipe César
  • 1,234
  • 2
  • 16
  • 34
1

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.

Community
  • 1
  • 1
Neil John Ramal
  • 3,734
  • 13
  • 20
  • Hey, thanks for your help! :) I'm using `firebase hosting` and there is a guide to use pretty urls on it: https://github.com/PolymerElements/polymer-starter-kit/blob/master/docs/deploy-to-firebase-pretty-urls.md. Seems the guide already tells about using `rewrites` to solve the problem you commented. But, I already applied this guide even before asking here and stills not working :( – Felipe César Jan 22 '16 at 15:28
0

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';
});
Dmytro
  • 345
  • 7
  • 14
  • Hey, thanks for helping! I deleted the section above and tried again. The problem continued the same :( – Felipe César Jan 22 '16 at 15:20
  • You modify the file `page.js` in source? And why use this: `// Removes end / from app.baseUrl which page.base requires for production if (window.location.port === '') { // if production page.base(app.baseUrl.replace(/\/$/, '')); }` It's must be used in `app.js`, not in the router. – Dmytro Jan 22 '16 at 16:17
  • This part already came in the `Polymer Starter Kit`: https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/scripts/app.js. I didn't modify page.js in source – Felipe César Jan 22 '16 at 16:40
  • Check routing [sourсe](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/elements/routing.html). In example first path is star `page('star', scrollToTop, closeDrawer, function(ctx, next) { next(); });` – Dmytro Jan 22 '16 at 16:59
  • Hey @Dmitry, thanks for trying to help me. I just solved the problem, it was a `tag` misplaced on the end of `` that should be in the beggining. I posted the answer explaining. Thanks bro :) – Felipe César Jan 22 '16 at 17:14