Static-web-apps: Add support for puppeteer/puppeteer to allow for site pre-rendering

[MrThePlague]

I tried to enable pre-rendering of a single-page application using a webpack pre-rendering package, which relies on puppeteer, and it appears that there is at least one x11 library (libxcb) missing to successfully launch the headless chromium instance.

The chromium package is successfully installed, but cannot be launched.

Chromium downloaded to /bin/staticsites/ss-oryx/app-int/node_modules/puppeteer/.local-chromium/linux-686378

> [email protected] install /bin/staticsites/ss-oryx/app-int/node_modules/yorkie
> node bin/install.js

CI detected, skipping Git hooks installation

---

-  Building for production...
Error: Failed to launch chrome!
/bin/staticsites/ss-oryx/app-int/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: error while loading shared libraries: libX11-xcb.so.1: cannot open shared object file: No such file or directory


TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md

    at onClose (/bin/staticsites/ss-oryx/app-int/node_modules/puppeteer/lib/Launcher.js:348:14)
    at Interface.<anonymous> (/bin/staticsites/ss-oryx/app-int/node_modules/puppeteer/lib/Launcher.js:337:50)
    at Interface.emit (events.js:322:22)
    at Interface.close (readline.js:409:8)
    at Socket.onend (readline.js:187:10)
    at Socket.emit (events.js:322:22)
    at endReadableNT (_stream_readable.js:1187:12)
    at processTicksAndRejections (internal/process/task_queues.js:84:21)
[Prerenderer - PuppeteerRenderer] Unable to start Puppeteer
(node:194) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'close' of null
    at PuppeteerRenderer.destroy (/bin/staticsites/ss-oryx/app-int/node_modules/@prerenderer/renderer-puppeteer/es6/renderer.js:140:21)
    at Prerenderer.destroy (/bin/staticsites/ss-oryx/app-int/node_modules/@prerenderer/prerenderer/es6/index.js:87:20)
    at /bin/staticsites/ss-oryx/app-int/node_modules/prerender-spa-plugin/es6/index.js:144:29
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
(node:194) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:194) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

[miwebst]

https://github.com/Azure/static-web-apps/issues/55 this is our current workaround, we are looking into options to making this a smoother experience!

[kichalla]

@MrThePlague You can use the following environment variable to list packages that you want to be installed as part of the build. By the way the following list is what might fix your error related to libxcb.

env:
   REQUIRED_OS_PACKAGES: "gconf-service, libasound2, libatk1.0-0, libc6, libcairo2, libcups2, libdbus-1-3, libexpat1, libfontconfig1, libgcc1, libgconf-2-4, libgdk-pixbuf2.0-0, libglib2.0-0, libgtk-3-0, libnspr4, libpango-1.0-0, libpangocairo-1.0-0, libstdc++6, libx11-6, libx11-xcb1, libxcb1, libxcomposite1, libxcursor1, libxdamage1, libxext6, libxfixes3, libxi6, libxrandr2, libxrender1, libxss1, libxtst6, fonts-liberation, libappindicator1, libnss3, lsb-release, xdg-utils"

Example: