Tools: BaseURL Support

[atishpatel]

Is there a way to use a baseURL with this tool?

Currently, the service worker keeps sending a request to src/my-app.html. If I change the polymer.json file to reflect the baseURL, it gives an error because it can't find the files.

[justinfagnani]

@atishpatel what are you changing in polymer.json?

[atishpatel]

Sorry for not being specific enough.

So here is what works:

polymer.json
{
      "entrypoint": "index.html",
      "shell": "src/my-app.html",
      "fragments": [
        "src/dashboard-page.html",
        "src/item-list.html",
        ...
      ]
}
sw-precache-config.js
module.exports = {
  staticFileGlobs: [
    '/gigachef/index.html',
    '/gigachef/manifest.json',
    '/gigachef/bower_components/webcomponentsjs/webcomponents-lite.min.js'
  ],
  navigateFallback: '/gigachef/index.html'
};

This builds but service worker keeps fetching stuff from /src/* and /bower_components/* instead of /gigachef/*
Changing the paths in polymer.json to 'gigachef/src/*' doesn't work because the tool starts looking for the gigachef dir, which is as expected.
I guess a clearer question would be 'Is there a way to use baseURL with polymer-cli?'

[justinfagnani]

Got it. Thanks for the clarification. We'll work on this.

[atishpatel]

There is a fix for this issue. Don't reference baseURL in polymer.json but use the baseURL for everything in sw-precache-config.js and add replacePrefix: "/baseURL", to the file.

Here is what my polymer.json file and sw-precache-config.js look like with baseURL support.

----polymer.json
{
  "entrypoint": "index.html",
  "shell": "src/app-shell.html",
  "fragments": [
    "src/onboard-steps.html",
    "src/kitchen-page.html"
  ],
  "sourceGlobs": [
    "src/**/*",
    "js/**/*",
    "bower.json"
  ],
  "includeDependencies": [
    "manifest.json",
    "bower_components/webcomponentsjs/webcomponents-lite.min.js"
  ]
}
----sw-precache-config.js
module.exports = {
  staticFileGlobs: [
    "/cook/index.html",
    "/cook/manifest.json",
    "/cook/bower_components/webcomponentsjs/webcomponents-lite.min.js"
  ],
  navigateFallback: "/cook/index.html",
  replacePrefix: "/cook",
};

And of course, use the base element tag in HTML: <base href="/cook/">

Hope this helps. :)

---

@justinfagnani It would be awesome to add an example of how to do this somewhere on the project. Thank you.

[FredKSchott]

Great! Agreed, we'll look into adding better documentation pointing to sw-precache and all of its supported options

[vinixhenri]

I was wondering how would that work for multiple environments, each with different base paths, like:

• local machine (base: /projects/foo/)
• staging (base: /foo/)
• production (base: /)

without the need to manually change the base tag's value or sw-precache-config file on every build.

I'm not sure if we could have a custom key in the "builds" array (https://www.polymer-project.org/2.0/docs/tools/polymer-json#builds) and use it as the value for the base tag:

--polymer.json
"builds": [{
... ,
"name": "local",
"base" : "/projects/foo"
}]

--index.html
<base href="{{base}}">

Currently, I'm using assets path as "/assets/images/foo.jpg", in which according to the Shop App (https://github.com/Polymer/shop) seems to be a "best practice".

[vvasuki]

How exactly does <base href="{{base}}"> work? I mean, at what stage is {{base}} replaced with /projects/foo? Because I see that it stays {{base}} in the polymer build output.