ChristopherBiscardi / gatsby-plugins

A collection of my Gatsby plugins
23 stars 5 forks source link

[gatsby-plugin-printer] Support for "Serverless" hosting builds (Netlify/Zeit) #22

Closed kylemcd closed 4 years ago

kylemcd commented 4 years ago

Implementing this all locally was a breeze, but unfortunately, I had to bypass running "gatsby-plugin-printer" on my Netlify build because it doesn't work out of the box with it.

There is a way to enable puppeteer on a Netlify build utilizing lambda functions, see here: https://bitsofco.de/how-to-use-puppeteer-in-a-netlify-aws-lambda-function/

I am wondering if there is an easy way to implement something like this or at least some first thoughts on how I could go about achieving this.

Thanks so much! This plugin is an absolute lifesaver!

ChristopherBiscardi commented 4 years ago

hey thanks :) I'm not sure what you mean by that since it's working on Netlify on my own personal blog. Could you provide some more information? I was thinking of moving the plugin to https://github.com/microsoft/playwright which might make this easier to run in a lambda

kylemcd commented 4 years ago

For sure!

I followed this tutorial for it since that seems to be the best documentation I found https://lannonbr.com/blog/2019-11-10-og-images/

The issue I'm running into is that Netlify can't launch chrome on the build, I assumed that would be a limitation of their build process but it sounds like it's not? Could you point in me in the direction of how you were able to set it up on your personal site?

Here's the exact error from the Netlify build: Evaluation failed: TypeError: window.ogRender is not a function

kylemcd commented 4 years ago

I ended up tracking down the answer to my problem. Documenting here in case anyone else runs into this 😃

I had to modify the reference in my gatsby-config to include the headless option.

{
      resolve: `gatsby-plugin-printer`,
      options: {
        puppeteerLaunchOptions: {
          headless: true
        }
    }
},

The part which seemed weird was originally from the tutorial above (https://lannonbr.com/blog/2019-11-10-og-images/) it recommended pinning to gatsby-plugin-printer to v1.0.8 which I did. It didn't work with Netlify, got (Evaluation failed: TypeError: window.ogRender is not a function) on the build. I tried to upgrade it to the latest version (v1.1.0) to no avail.

I then tried to upgrade my node version on Netlify, think it was defaulting to version v8.x.x, but I now put it at v12.13.1, and still no luck.

At this point v1.1.0 still wasn't working so I reverted to v1.0.8 and bingo... was a node version problem all along 🙃

Not sure what is happening between the version that is causing this issue, but this route worked for me.

ChristopherBiscardi commented 4 years ago

I also just recently wrote some code that can be deployed behind cloudinary as a cache to power opengraph images using serverless functions

llamerr commented 3 years ago

This may look ironic, but gatsby-plugin-printer failing on gatsby cloud for me, guess I will fork that gatsby-theme-apollo-docs I'm trying to use and try solution from above

14:11:46 PM:
ERROR "gatsby-plugin-printer" threw an error while running the onPostBuild lifecycle:

14:11:46 PM:
Failed to launch chrome!

14:11:46 PM:
/usr/src/app/www/docs/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: error while loading shared libraries: libXtst.so.6: cannot open shared object file: No such file or directory
ChristopherBiscardi commented 3 years ago

yes, feel free to fork. I do not maintain this much any more.