CODEWITHSUNDEEP
apachepolymer
doughaase
doughaase

Reputation: 245

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.

Upvotes: 1

Views: 929

Answers (2)

slowjack2k
slowjack2k

Reputation: 2586

If you'r using vhosts it can be that you have to prefix your rewrite condition with the document root like this:

<ifModule mod_rewrite.c>
  # debug with apache since 2.4 mod_rewrite
  # LogLevel alert rewrite:trace6

  Options +FollowSymLinks
  IndexIgnore */*
  RewriteEngine On
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_FILENAME} !-f
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_FILENAME} !-d
  # last rule, append query string
  RewriteRule (.*) /index.html [L,QSA]
</ifModule>

Upvotes: 0

doughaase
doughaase

Reputation: 245

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>

Upvotes: 3

Related Questions