Search code examples
apachepolymer

Polymer with Apache server: URL and app-route configuration


I made a small Polymer mobile application. I copied the build/bundled folder (deploy files) to a machine with Ubuntu and apache2.

The root is the usual var/www/html. There's an index.html file and then a /src folder with all the other interfaces (htmls) build with Polymer.

Security model for the directory:

<Directory /var/www/>
    Options FollowSymLinks
    AllowOverride None
    Require all granted
</Directory>

On Polymer, I configured the app-route on most of the pages, like this:

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

And some of the pages are like this:

<app-route route="{{route}}"
           pattern="/:recordid"
           data="{{routeData}}"></app-route>

It's a just basic page routing with Polymer, looking for the name of the page to show. So the navigation with it looks like this:

domain.com
domain.com/vehicles
domain.com/vehicles/id_of_the_vehicle
domain.com/customers

Besides the first one (index.html), all of the other pages are in the /src folder.

It's all working fine, until I refresh one of the pages. The feature 'pull-down-to-refresh' on Chrome, for instance, automatically refresh the pages. When the refresh happens, the server tries to look for '/vehicles' file, for example, and it will show a 404 error, because there's no such file at the root folder. It's a route used on the app-route component of Polymer to indicate which file to look for...

So I guess I need to treat every request as 'index.html', because this file points to another file (my-app.html) that has all the app-route configurations... the client should handle all of the routes. Is this correct, though? How can I do this? Should I try Express from Node.js as the web server instead of apache?

If I run the app with the local Polymer server (polymer serve --params) for testing purposes, it all works fine, with the refreshes and all.


Solution

  • Just as I suspected, I had to treat every request (besides root '/') as index.html

    So a simple .htaccess on the root folder solved it:

    <IfModule mod_rewrite.c>
            Options +FollowSymLinks
            IndexIgnore */*
            RewriteEngine On
            RewriteCond %{REQUEST_FILENAME} !-f
            RewriteCond %{REQUEST_FILENAME} !-d
            RewriteRule (.*) index.html
    </IfModule>