Maintenance of the Polymer application on / off-root

Question

So, the first thing I want to do with the new Polymer application can be deployed to a directory on an existing website. The only thing that seems to work is to install on root /.

Take an example of a store. I AM:

• polymer init and choose a store
• polymer build
• Robocopy.exe .\build\bundled\ C:\inetpub\wwwroot\p\ /MIR
• start http://localhost/p/

You see that I am in Windows. I assume that using IIS does not matter, since I rely on the server to serve static content.

What do I need to change in the store template to make it work with the url http://localhost/p/?

Answer 1

, -cli, '/'. index.html

<!--

      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>

Hide result

index.html base window.Polymer rootPath - '/0/polymer-test/build/es5-bundled/', http://localhost/0/polymer-test/build/es5-bundled/

Answer 2

shop-app , . , .

, :

• ,
• all pattern app-route ( , useHashAsPath = true),
• , , importHref,
• ( )
• (CSS, , JS)

---

, - shop-app, , root .

, , useHashAsPath app-location. false, , URL- hashbang.

1: useHashAsPath = true

, URL- . : <a href="#/tabs/">Tabs</a>.

.

- , .

2: useHashAsPath = false

URL- hashbang, . , , ( ).

-, , (, ).

, . , , , __ROOT__, . :

<a href="__ROOT__/some/page">Some page</a>

gulp-replace - , __ROOT_ /your-document-root , - :

<a href="/your-document-root/some/page">Some page</a>

. . app-route. :

<app-route pattern="__ROOT__/some/page" [...]></app-route> // Other parameters ommited

, CSS, __ROOT__, .

- , .

---

: https://www.polymer-project.org/1.0/blog/routing