Generating Screenshots in Your API

I’m starting to share my latest project with people and one thing that stands out to me is that CodeCook.live Profile Page is a bit plain. As a starting point, here is what it looks like right now.

The first thing I notice is we could have images for the projects. We allow you to upload screenshots after you import your project, but people might be likely to miss that. What if we made it automatic?

It isn’t even that difficult actually. We can use Puppeteer and a special fork of chromium to capture a screenshot of a specified webpage by navigating to its URL and rendering it in a headless browser. I make a simple utility function to do this:

import chromium from "@sparticuz/chromium"
import puppeteer from "puppeteer-core"
import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3"

interface GenerateScreenshotParams {
  url: string
  key: string
}

export async function generateAndUploadScreenshot({ url, key }: GenerateScreenshotParams) {
  try {
    // Launch browser
    const browser = await puppeteer.launch({
      args: chromium.args,
      defaultViewport: chromium.defaultViewport,
      executablePath: await chromium.executablePath(),
      headless: chromium.headless,
    })

    // Create a new page
    const page = await browser.newPage()

    // Set viewport
    await page.setViewport({ width: 1280, height: 720 })

    // Navigate to URL
    await page.goto(url, { waitUntil: "networkidle0", timeout: 30000 })

    // Take screenshot
    const screenshot = await page.screenshot({ type: "png" })

    // Close browser
    await browser.close()

    // Upload to S3
    const s3Client = new S3Client({
      region: process.env.AWS_REGION!,
      credentials: {
        accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
        secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
      },
    })

    await s3Client.send(
      new PutObjectCommand({
        Bucket: process.env.S3_BUCKET_NAME!,
        Key: key,
        Body: screenshot,
        ContentType: "image/png",
      })
    )

    // Return the URL
    return `https://${process.env.S3_BUCKET_NAME}.s3.${process.env.AWS_REGION}.amazonaws.com/${key}`
  } catch (error) {
    console.error("Screenshot generation failed:", error)
    throw error
  }
}

Then I use the utility function in my createProject server action to capture the screenshot and upload it to S3 at a url keyed to the username and project id.

As a bonus, I added a button to the EditProjectForm to allow people to easily generate a new screenshot for their project using this same function.

Here’s an example of how you might use the generateAndUploadScreenshot function:

import React, { useState } from "react";
import { generateAndUploadScreenshot } from "../utils/screenshot"; // Adjust path as necessary

const ScreenshotButton: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [screenshotUrl, setScreenshotUrl] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  const handleGenerateScreenshot = async () => {
    setLoading(true);
    setError(null);
    setScreenshotUrl(null);

    const urlToCapture = "https://example.com"; // Replace with the URL to capture
    const s3Key = `screenshots/${Date.now()}-example.png`;

    try {
      const uploadedUrl = await generateAndUploadScreenshot({
        url: urlToCapture,
        key: s3Key,
      });
      setScreenshotUrl(uploadedUrl);
    } catch (err) {
      setError("Failed to generate screenshot. Please try again.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <button onClick={handleGenerateScreenshot} disabled={loading}>
        {loading ? "Generating..." : "Generate Screenshot"}
      </button>

      {screenshotUrl && (
        <div>
          <p>Screenshot uploaded successfully:</p>
          <a href={screenshotUrl} target="_blank" rel="noopener noreferrer">
            {screenshotUrl}
          </a>
        </div>
      )}

      {error && <p style={{ color: "red" }}>{error}</p>}
    </div>
  );
};

export default ScreenshotButton;

And now that we have this working, our projects page looks much nicer!

Originally published as a live coding session on CodeCook.live.