Hosting Polymer app on web server with base URLs

3
votes

If I take the Polymer starter kit, it works well locally. I can navigate to http://localhost:8080/ and all the links to the 3 views work fine.

Now, if I host this app on a web server (that is shared with other apps) on a URL such as http://myservername:8080/mywonderfulapp/, I am having trouble with the routing. Is there a way I can mention the app-route to take in the relative URL?

I tried making changes to the html files to have relative URLs

<link rel="import" href="./src/my-app.html">
<a name="view1" href="./view1">View One</a>
<base href="/mywonderfulapp/">

but I cant seem to fix the app-routing in a similar fashion.

All similar questions here on SO seem to be about a pre-1.0 version of Polymer, and mention page.js and hash-bang routing instead of the HTML5-history-friendly URLs and the app-route component.

I would prefer to make minimal code changes to ensure

  • the same code works locally as well as on the remote host
  • the app is not dependent on the base URL on which it is hosted - so, preferably I dont have to mention "mywonderfulapp" (from the URL above) anywhere in the code.
2
polymerpolymer-1.0relative-pathpolymer-starter-kit
I think you're running onto this problem: stackoverflow.com/questions/39608956/polymer-error-on-reloading – Jeroen van Dijk-Jun
No, that's a different issue. In that one, it requires server-side routing to map certain URLs to index.html. – sudheeshix
github.com/PolymerElements/polymer-starter-kit/commit/… that may be relevant to the routing/ page.js issue you have – Robert Rowntree
Thanks Robert. That commit is not relevant now, as Polymer isn't using page.js for routing anymore. – sudheeshix

2 Answers

2
votes

The closest I got with this so far, is to:

mention a placeholder for a URL prefix in the app-route pattern.

<app-route
    route="{{route}}"
    pattern="/:prefix/:page"
    data="{{routeData}}"
    tail="{{subroute}}"></app-route>

and then use that in the href attribute for the anchor

<a name="view1" href="/[[routeData.prefix]]/view1">View One</a>
<a name="view2" href="/[[routeData.prefix]]/view2">View Two</a>
<a name="view3" href="/[[routeData.prefix]]/view3">View Three</a>

The drawback with this approach is that I have to use the URL as http://localhost:8080/mywonderfulapp/ even when working locally, but at least I don't have to modify code anymore when deploying to my remote web server.

0
votes

As stated in the comments, this was solved in a similar posting on stackoverflow.com/questions/39608956/polymer-error-on-reload‌​ing

Side note for firebase users - if you deploy this same version of starter kit to firebase and do a firebase serve at the CLI, this problem will even occur in the localhost, so you will need the above fix, even for there.