Build polymer app for non root path
Build polymer app for non root path
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
1 Answer
1
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:
import.meta.url
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:
import.meta.url
polymer build
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:
import.meta.url
return html`<div>
<img src$="$this.baseURI/images/spinner.gif" alt="Spinner">
</div>`;
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
