Compiling a React to an IIFE with Rollup to execute and render in a headless browser

Chris Biscardi
InstructorChris Biscardi

Share this video with your friends

Send Tweet

We take the opengraph image we wrote in codesandbox and copy it into our serverless function. We use Rollup to compile the component into an IIFE (immediately invoked function expression) that can run in our headless browser environment and cover a wide set of rollup plugins that we need for compatibility. We end the lesson having successfully screenshot our opengraph react component from our Netlify Function

Note: Due to Netlify changing their handling, the path in fs.readFileSync is affected. Update to:

const script = fs.readFileSync(path.resolve(__dirname, "image.js"), "utf-8");
James Grubb
James Grubb
~ 10 months ago

Hi thanks for the course Chris, I'm trying to use playwright-aws-lambda in a project to take some screen shos using a phone size.

im trying to use the following code const context = await browser.newContext({ viewport: iPhone.viewport, useAgent: iPhone.userAgent }); but I noticed in your code that you use browser._defaultContext rather than browser.defaultContext()

Was there a reason? Thanks in advance.

Chris Biscardi
Chris Biscardiinstructor
~ a month ago

Yes, the reason was that when I created this video series, playwright was much newer and we needed to take advantage of some different APIs that newContext is built on top of.