Better documentation for polymer-build basePath

[SieBRUM]

So Polymer build has this amazing feature where you can specify the basePath in the build. So setting "basePath":"/test/" in your polymer.json will autoset: <base href="/test/"> AND window.Polymer.rootPath = "/test/" in that specific build.

This is freaking amazing, but it's not really well documented. Please do so, because i can imagine that this is a feature that a lot of people will appreciate when documented.

And by the way, this feature is not documented in the Build for production section

[ghost]

@arthurevans @aomarks

Just wanted to make sure I understand this functionality correctly. Here's my understanding - could you confirm or correct? Thanks :)

• Supposing the user has NOT set the global rootPath property, "basePath":"/test/" in Polymer.json sets <base href="/test/"> (provided <base href=""> is already in the entrypoint)

• Supposing the user HAS set the global rootPath property to something, "basePath":"/test/" in Polymer.json overrides something (provided <base href=""> is already in the entrypoint)

• autoBasePath in Polymer.json overrides all of the above, sets basePath to true and therefore "basePath":"/buildName/" (provided <base href=""> is already in the entrypoint)

• If <base href=""> is not present, basePath and autoBasePath do nothing

[aomarks]

Supposing the user has NOT set the global rootPath property, "basePath":"/test/" in Polymer.json sets (provided is already in the entrypoint)

Supposing the user HAS set the global rootPath property to something, "basePath":"/test/" in Polymer.json overrides something (provided is already in the entrypoint)

I'm not sure really how basePath interacts with rootPath or how you should use them together. I do know that the code that updates the <base> tag doesn't know anything about rootPath, so that will happen regardless.

autoBasePath in Polymer.json overrides all of the above, sets basePath to true and therefore "basePath":"/buildName/" (provided is already in the entrypoint)

Correct.

If is not present, basePath and autoBasePath do nothing

Correct, there must be a <base> tag (typically it should be set to <base href="/">) in the entrypoint or else nothing happens.

[ghost]

Thanks for the response @aomarks! Do you know who I could ask re: basePath and rootPath?

[aomarks]

Maybe rootPath is supposed to be used when your app can move around, sometimes mounted at /, sometimes at /foo/, so you do [[rootPath]]/link in your templates? I think the two are independent -- rootPath is about your application route space, basePath is more about the location of static assets -- the user should never see basePath in visible URLs.

@justinfagnani Does that sound right?

[justinfagnani]

@aomarks that's right.

cc @usergenic

[lezsakdomi]

For those folks, who came here from a search: Having a <base href="/"> and later window.Polymer = {rootPath: '{{base}}'}; before <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script> does take advantage of basePath.

Update Not really. It looks like sometimes ony the base tag gets updated. See https://github.com/lezsakdomi/elte-mester-data/commit/75a16d183eddb7a6074664ba5e74ffe364bccdb0

[nicolasr75]

The solution of @lezsakdomi (see his Update!) did not work for me. This works for me though:

if (document.querySelector('base')) {
	const url = new URL(document.querySelector('base').href);
	Polymer.rootPath = url.pathname;
}