Build polymer app for non root path

Question

I think this is not a duplicate of Serving Polymer App to a /path not at root, because it is about newer versions of Polymer-cli version 1.8 and Polymer 3

I have created a very simple component that works with "polymer serve" and with "polymer build" when served from the root path.

According to the documentation, you can build the application for non-root paths, using the --base-path build option. However, this does not seem to work for all resources

Example project is on github https://github.com/anneb/polymer-simple-component/

The basics:

index.html

<!doctype html>
<html lang="en">
  <head>
    <title>Simple Polymer app</title>
    <base href="/">
  </head>
  <body>
    <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>    
    <script type="module" src="src/components/simple-component.js"></script>
    <simple-component></simple-component>
  </body>
</html>

The simple-component with relative reference to ../../images/spinner.gif:

import {LitElement, html} from '@polymer/lit-element';
class SimpleComponent extends LitElement {
  _render() {
    return html`<div><img src="../../images/spinner.gif" alt="Spinner"></div>`;
  }
}
customElements.define('simple-component', SimpleComponent);

The above works (spinner visible) if tested with

polymer serve

and

polymer build

However, when built with:

polymer build --name es5-bundled --base-path es5-bundled

You can now serve es5-bundled from the build directory (parent of build/es5-bundled) and the code now mostly uses path /es5-bundled/, but the referenced spinner.gif is still expected at /images/spinner.gif, why?

My polymer.json:

{
    "entrypoint": "index.html",
    "shell": "src/components/simple-component.js",
    "sources": [
      "images/**/*"
    ],
    "extraDependencies": [
      "node_modules/@webcomponents/webcomponentsjs/**"
    ],
    "builds": [
      {
        "name": "es5-bundled",
        "js": {
          "compile": "es5",
          "minify": true,
          "transformModulesToAmd": true
        },
        "css": {
          "minify": true
        },
        "html": {
          "minify": true
        },
        "bundle": true,
        "addServiceWorker": true
      }
    ],
    "moduleResolution": "node",
    "npm": true
}

anneb · Answer 1 · 2018-08-20T23:12:28.123

The example component is using a relative path:

return html`<div><img src="../../images/spinner.gif" alt="Spinner"></div>`;

This might be improved using the module URL from import.meta.url as follows:

return html`<div>
  <img src$="${new URL('../../images/spinner.gif', import.meta.url).href}" alt="Spinner">
  </div>`;

As import.meta.url is not supported by for example Firefox, you have to polymer build using option --js-transform-import-meta:

polymer build --name es5-bundled --build-path es5-bundled --js-transform-import-meta

Another workaround for import.meta.url that will work for single page apps is:

return html`<div>
  <img src$="${this.baseURI}/images/spinner.gif" alt="Spinner">
  </div>`;

I had the same problem with loading stylesheet resource in app served from non-root location. Following works: `` — Tihomir, Jan 03 '19 at 14:44

Build polymer app for non root path

1 Answers1