How does one properly deploy a Polymer CLI app on an Apache web server?

Question

In my efforts to understand Polymer, I decided to try building some of their starter projects.

My first attempts involved the Polymer CLI. I choose to make an app based on the drawer-app-template. I had no issue building using polymer build nor did I have an issue running a demo using polymer serve.

However, I encountered a few issues when running a Python web server on one of the two built directories. When running the Python web server, the app appears to run without issue, that is until I hit refresh on my browser. Then it returns an error message about being unable to find '/view2'; only by refreshing at the website root is there no issue.

I tried to deploy the same app to an Apache web server. Similar issues occurred where refreshing anywhere but the first page of the web app causes problems.

I then tried my hand at the Polymer Starter Kit (which somehow seems to be inaccessible from the rest of the Polymer project website). I had no issues building nor any issues previewing via the appropriate gulp commands. Then I tried running a Python web server on the results of the build and hitting refresh on the various webpages. This time there weren't any issues in refreshing.

At this point it might be easy to say that there is something wrong with the Polymer CLI, but I want to be absolutely sure that I haven't made any mistakes in the process of deploying the CLI app.

There are very little resources on the Internet that explain in a clear and concise manner how to deploy a Polymer application to a production-level web server.

If I did make a mistake, please tell the proper process. If I haven't made a mistake, please tell me that as well.

Answer 1

Apache add file .htaccess

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

Answer 2

You need to define use-hash-as-path option on "app-location" component and then your URLs must contain hash (#) sign as explained here with example here.

<app-location route="{{route}}" use-hash-as-path></app-location>
<a name=component href="#/component">Component</a>