Search code examples
polymer

Serving Polymer App to a /path not at root

So the first thing I want to do with a new Polymer app is deploy to a directory on an existing website. The only thing that seems to work is deploying to root /.

Let's take the Shop example. I do:

  1. polymer init and choose shop
  2. polymer build
  3. Robocopy.exe .\build\bundled\ C:\inetpub\wwwroot\p\ /MIR
  4. start http://localhost/p/

You see I'm on Windows. I assume that using IIS is irrelevant, since I'm relying on the server just to serve static content.

What do I need to edit in the shop template to make it work at the url http://localhost/p/?

Solution

  • The polymer-cli created apps came with assumption of serving from root level '/'. In generated project index.html you will find two comments

    <!--

      The `<base>` tag below is present to support two advanced deployment options:
      1) Differential serving. 2) Serving from a non-root path.
    
      Instead of manually editing the `<base>` tag yourself, you should generally either:
      a) Add a `basePath` property to the build configuration in your `polymer.json`.
      b) Use the `--base-path` command-line option for `polymer build`.
    
      Note: If you intend to serve from a non-root path, see [polymer-root-path] below.

-->
    <base href="/">
<!-- ... -->

<script>
    /**
    * [polymer-root-path]
    *
    * By default, we set `Polymer.rootPath` to the server root path (`/`).
    * Leave this line unchanged if you intend to serve your app from the root
    * path (e.g., with URLs like `my.domain/` and `my.domain/view1`).
    *
    * If you intend to serve your app from a non-root path (e.g., with URLs
    * like `my.domain/my-app/` and `my.domain/my-app/view1`), edit this line
    * to indicate the path from which you'll be serving, including leading
    * and trailing slashes (e.g., `/my-app/`).
    */
    window.Polymer = {rootPath: '/'};
  // ...    
 

</script>

    if in this index.html file you comment out base tag and set window.Polymer rootPath to something like '/0/polymer-test/build/es5-bundled/' you will be able to navigate in app on http://localhost/0/polymer-test/build/es5-bundled/