Build: Support Chrome install on build bot for plugin execution

[JakePartusch]

👋 Hey! I'm not sure if this is the correct place for issues/requests for the build plugin beta. If not, let me know!

Which problem is this feature request solving?

In attempting to develop a plugin, there doesn't seem to be a way to select to have chrome install on the build image.

Example of the plugin, which utilizes https://github.com/GoogleChrome/lighthouse-ci

module.exports = {
  name: "netlify-plugin-lighthouse",
  onEnd: () => {
    require("child_process").spawnSync(
      "npx",
      ["@lhci/cli", "autorun", "--upload.target=temporary-public-storage"],
      {
        cwd: process.cwd(),
        stdio: "inherit"
      }
    );
  }
};

Output:

9:07:00 PM: ┌───────────────────────────────────────────────────────────┐
9:07:00 PM: │ 2. Running onEnd lifecycle from netlify-plugin-lighthouse │
9:07:00 PM: └───────────────────────────────────────────────────────────┘
9:07:00 PM: 
9:07:20 PM: npx: installed 372 in 17.372s
9:07:20 PM: ✅  .lighthouseci/ directory writable
9:07:20 PM: ⚠️   Configuration file not found
9:07:20 PM: ❌  Chrome installation not found
9:07:20 PM:     ERROR: The environment variable CHROME_PATH must be set to executable of a build of Chromium version 54.0 or later.
9:07:20 PM: Healthcheck failed!

Describe the solution you'd like

A configuration option like Travis, or other CI providers would be great!

addons:
  chrome: stable # make Chrome available

[ehmicky]

Hi @JakePartusch!

Our build image does not have Chrome installed by default (I believe).

You could either:

• create a separate plugin with the sole purpose of installing Chrome (in an onInstall event handler), and ask users to use both. We are working on features to bundle plugins together in the future.
• add an onInstall event handler to your plugin, to install Chrome.

For better performance, that event handler should first make sure Chrome is not already installed.

[JakePartusch]

Thanks @ehmicky, I'll give that a shot!

[soofka]

Hello. So I stumbled upon this thread when looking for a way to enable Chrome in Netlify build. Ultimately I didn't find a solution, so I decided to build one myself, and this thread was very helpful. You can find it here: https://github.com/soofka/netlify-plugin-chromium

Pretty sure it can be done better, I am modifying environmental variable in the process (although I enable configuration option to opt-out of this) so it smells a bit, but with it I was able to get Lighthouse CI to run with lhci autorun command in Netlify without issues. Hope it helps.

[ehmicky]

This is amazing!

You should submit this to the plugins directory so Netlify starts displaying in the UI for other users :)

Quick notes on this function:

• We provide with a utils.run() utility which automatically sets the correct options for child_process inside Build plugins (including stdio: 'inherit')
• Calling try { getChromiumPath() } catch { await utils.run('npm install chromium') } should be much faster and might be more reliable? Also the || operator is Bash-specific so might not work for Windows users.
• Some users use yarn instead of npm

But apart from those details, this is super useful!

[soofka]

Thanks @ehmicky! Especially for suggestions, very helpful. I liked them all so I implemented them all. Not only added support for yarn and improved cross-platform compatibility with them but also improved performance and was able to write better unit tests :-). Version 1.1 was published. I'll add it to plugins directory! Thanks again! :-D