Using zipped binaries - How to actually use them?

This is My Repo if you want to see the code.

Netlify Built project here open netowrk tab to see 502 error

I am trying to get a headless chrome browser to work with gatsby and failing so far. Even with the Netlify-Labs Repo netlify-labs/netlify-functions-headless-chrome, I was unable to understand what is going on here.

  • create package json in function folder.
  • change permissions of folder
  • create zip of folder
  • move folder
  • update toml file to direct to folder
  1. What is supposed to happen to this zip, what reads it?
  2. can netlify-lambda be used to take care of this zip?
  3. Can someone help me understand this process and what I do not understand?

Guys I am a week at figuring this out. I am begging for some attention to this. If you have a moment, I would be so grateful.

Hey @CodeAmend

Here is a working project with headless chrome + netlify functions

const chromium = require('chrome-aws-lambda')
const puppeteer = require('puppeteer-core')

exports.handler = async (event, context, callback) => {
  let theTitle = null
  let browser = null
  console.log('spawning chrome headless')
  try {
    const executablePath = await chromium.executablePath

    // setup
    browser = await puppeteer.launch({
      args: chromium.args,
      executablePath: executablePath,
      headless: chromium.headless,
    })

    // Do stuff with headless chrome
    const page = await browser.newPage()
    const targetUrl = 'https://davidwells.io'

    // Goto page and then do stuff
    await page.goto(targetUrl, {
      waitUntil: ["domcontentloaded", "networkidle0"]
    })

    await page.waitForSelector('#phenomic')

    theTitle = await page.title();

    console.log('done on page', theTitle)

  } catch (error) {
    console.log('error', error)
    return callback(null, {
      statusCode: 500,
      body: JSON.stringify({
        error: error
      })
    })
  } finally {
    // close browser
    if (browser !== null) {
      await browser.close()
    }
  }

  return callback(null, {
    statusCode: 200,
    body: JSON.stringify({
      title: theTitle,
    })
  })
}

Ah you saw this

The scripts will zip up the code for you and drop into the functions directory

The example works however you will need to contact support for them to bump the function timeout for the functions to complete successfully

David,
I appreciate the response. I did mention this in my post as you later commented, but I am not having a problem building, it is actually zipping and completing without error. So I have no idea how to debug or what is going on. If we need to bump up the level and start paying, that will inevitably happen later when my client is ready to go public. As for now, there is no errors on build.

Is this what you are talking about? I found this in the log in settings > functions.

12:06:30 PM: chrome invoked
12:06:31 PM: Unable to import module 'chrome': Error
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
2:33:25 PM: chrome invoked
2:33:25 PM: Unable to import module 'chrome': Error
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
2:33:29 PM: chrome invoked
2:33:30 PM: Unable to import module 'chrome': Error
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
2:34:39 PM: chrome invoked
2:34:39 PM: Unable to import module 'chrome': Error
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
4:11:54 PM: chrome invoked
4:11:55 PM: Unable to import module 'chrome': Error
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)

Download the site build and verify that your functions have the installed node_modules required.

It sounds like these deps are not there https://github.com/netlify-labs/netlify-functions-headless-chrome/blob/master/functions/chrome/package.json#L12-L13

Is there a way to tell your function if you are using netlify dev to build it locally so you can use your local version of chrome instead of puppeteer-core? I’m having issues testing locally.

@itwasmattgregg did you install the local node_modules? npm will look there before it goes to your globally installed modules. Can you provide more context for the problem you’re having? If you’re using headless chrome installed locally then it should be used in your function when you import/require it.

So I’ve got a function running puppeteer. It imports puppeteer-core and chrome-aws-lambda in the function and runs them there. However when I try to call the function locally I get this error:

error Error: Chromium revision is not downloaded. Run "npm install" or "yarn install"
    at Launcher.launch

Did some digging on that and it seems there is an issue with running puppeteer-core on a machine that has Chrome installed globally. I guess it gets confused.

@itwasmattgregg, it sounds like you have tracked down the root cause of this. If there is more we can do, please let us know.

I found that on the free plan it’s not really possible to download and run chromium (even the chrome-aws-lambda version). I found another way of doing what I wanted.

Still never solved the issue though of Chromium revision not being found when running locally.