Lighthouse-ci: HTML <base> tag behavior

[xavierfoucrier]

Hi GoogleChrome team!

I am quite new to lighthouse-ci and have started working with it a week ago.

Everything about the configuration looks clear to me, but I am unable to make it work (complete without errors) when my dist files contain an HTML <base> tag in the header.

Here is my LHCI configuration:

"ci": {
  "collect": {
    "staticDistDir": "dist",
    "numberOfRuns": "2"
  },
  "assert": {
    "preset": "lighthouse:no-pwa",
    "assertions": {
      "is-crawlable": "off"
    }
  }
}

I have tried to run lighthouse against a simple index.html file that contain a <base href="http://localhost/"> tag at the top of the head. The problem is that lighthouse doesn't seem to take care of this tag: it return an error when trying to load a simple JS or CSS file in the page, because the port is missing at the end of the base tag...

_/app.js(localhost)_ Failed to load resource: net::ERR_CONNECTION_REFUSED

I was thinking of setting a fixed port on LHCI but this sounds not possible :thinking:

Thanks for your feedback :wink:

[patrickhulce]

Thanks for filing @xavierfoucrier!

Why are you using a base tag for an origin that you aren't using though? Is there a reason you're hardcoding http://localhost/ instead of using /?

If your site must be served over port 80 on localhost for some reason then you'll need to use your own server (see docs).

[xavierfoucrier]

Hi @patrickhulce,

Thanks for the fast reply!

I am using webpack to build a static website for one of my projects: the <base> tag allow me to avoid backward lookup in pages that are inside sub-folders. My setup automatically adjust the base tag depending on the environment I am targeting for the deployment:

• dev: vhost running through webpack-dev-server (local)
• stage: sub-domain hosted on a pre-production server (online)
• prod: domain hosted on a production server (online)

Considering:

• /index.html
• /docs/how-it-works.html
• /docs/generators.html
• /docs/rendering-engine.html
• /assets/app.min.js
• _etc._

In this example if the generators.html page contains <script src="assets/app.min.js"></script>, the browser will automatically fallback to http://localhost/assets/app.min.js, without having for me to target the backward folder with ../assets/app.min.js. See https://developer.mozilla.org/fr/docs/Web/HTML/Element/base.

With this tag, I can put all the website on any server without caring about relative URLs.

May be I should run webpack-dev-server in watch mode with custom LHCI configuration pointing on it? :thinking:

[xavierfoucrier]

@patrickhulce,

After reading you a second time, I have replaced the <base href="http://localhost/"> with <base href="/"> to make a test... and it works! :tada:

Thanks a lot! :wink:

May be adding a note/comment about this in the docs for other developers should help.
Let me know if you want a PR, or feel free to close the issue.

[patrickhulce]

Glad you figured it out :)