aesthetic.computer / core
Monorepo for Aesthetic.Computer aesthetic.computer
Star
Fork 0
Watch
core grab docs DEV-SETUP.md
5.2 kB
Markdown
at backup/pre-reset-main

Grab Worker - Development Setup #

Overview #

The grab worker handles screenshot generation for aesthetic.computer. This guide covers local development and testing.

Local Development #

Run the worker locally with Cloudflare's dev environment:

cd /workspaces/aesthetic-computer/grab
npm run dev

This starts a local server at http://127.0.0.1:8787

Test locally:

curl -I "http://127.0.0.1:8787/icon/128x128/prompt.png"

Option 2: Remote Testing #

Use the deployed worker during development:

# Production worker
curl -I "https://grab.aesthetic.computer/icon/128x128/prompt.png"

# Or workers.dev URL
curl -I "https://aesthetic-grab.aesthetic-computer.workers.dev/icon/128x128/prompt.png"

Integration with Netlify Dev #

When running netlify dev (typically on http://localhost:8888), the redirects in netlify.toml will proxy requests to the grab worker:

  1. Local aesthetic.computer makes request to /icon/128x128/prompt.png
  2. Netlify redirect proxies to https://grab.aesthetic.computer/icon/128x128/prompt.png
  3. Grab worker generates and returns screenshot

Testing the Full Stack #

# Start netlify dev
cd /workspaces/aesthetic-computer
netlify dev

# In another terminal, test icon generation
curl -I "http://localhost:8888/icon/128x128/prompt.png"

# Should see redirect to grab.aesthetic.computer

Dev Stack Integration #

Adding to Emacs Web Panels #

To run the grab worker in your dev stack alongside other services:

  1. Create an Emacs pane for the grab worker:

    # In your dev startup script or manually
cd /workspaces/aesthetic-computer/grab && npm run dev

  2. Monitor logs with wrangler tail:

    cd /workspaces/aesthetic-computer/grab
npx wrangler tail

  3. Check worker status:

    cd /workspaces/aesthetic-computer/grab
npx wrangler dev --test-scheduled

Environment Variables for Development #

The worker automatically detects localhost URLs and adjusts timeouts:

  • Production timeout: 30 seconds
  • Development: Can increase if needed by updating wrangler.toml

Debugging #

View Real-time Logs #

cd /workspaces/aesthetic-computer/grab
npx wrangler tail

# In another terminal, trigger a screenshot
curl "https://grab.aesthetic.computer/icon/256x256/prompt.png" > /dev/null

Common Issues #

1. Empty Screenshots

  • Ensure @cloudflare/puppeteer is latest version (not 0.0.1)
  • Check browser binding is active in wrangler.toml

2. Timeout Errors

  • Increase SCREENSHOT_TIMEOUT_MS in wrangler.toml
  • Check if aesthetic.computer piece loads properly

3. 404 on Custom Domain

  • Custom domain may not be set up yet
  • Use aesthetic-grab.aesthetic-computer.workers.dev URL instead

4. Canvas Not Found

  • Piece may not have rendered yet
  • Increase RENDER_DELAY_MS in wrangler.toml
  • Check if piece uses window.preloaded flag

Local vs Production URLs #

Production (After Custom Domain Setup) #

https://grab.aesthetic.computer/icon/128x128/prompt.png
https://grab.aesthetic.computer/preview/1200x630/prompt.png

Workers.dev (Always Available) #

https://aesthetic-grab.aesthetic-computer.workers.dev/icon/128x128/prompt.png
https://aesthetic-grab.aesthetic-computer.workers.dev/preview/1200x630/prompt.png

Local Development #

http://127.0.0.1:8787/icon/128x128/prompt.png
http://127.0.0.1:8787/preview/1200x630/prompt.png

Testing Query Parameters #

The worker constructs URLs with query parameters to tell the aesthetic.computer client which resolution to render:

# Icon request becomes:
# https://aesthetic.computer/prompt?icon=128x128

# Preview request becomes:
# https://aesthetic.computer/prompt?preview=1200x630

# Test this by checking logs:
npx wrangler tail

You should see log messages like:

Taking screenshot: 128x128 of https://aesthetic.computer/prompt?icon=128x128
Canvas element found
Screenshot generated successfully

Hot Reloading #

Wrangler dev supports hot reloading:

  1. Make changes to src/index.ts
  2. Save the file
  3. Wrangler automatically rebuilds and restarts
  4. Test with curl immediately

Performance Monitoring #

Check Screenshot Generation Time #

curl -w "\nTime: %{time_total}s\n" -o /dev/null -s \
  "https://grab.aesthetic.computer/icon/128x128/prompt.png"

Typical times:

  • First request (cold start): ~8-12 seconds
  • Cached requests: < 1 second
  • Browser reuse: ~3-5 seconds

Monitor Durable Object State #

Check if browser sessions are being reused:

npx wrangler tail --format json | jq '.logs[] | select(.message | contains("Browser DO"))'

You should see:

  • Browser DO: setting alarm - Browser staying alive
  • Browser DO: alarm triggered - Browser cleanup after 60s

Next Steps #