ContactSign in

How to build a browserless application with Edge Functions

This guide demonstrates how to create a browserless application using Azion Edge Functions. Browserless applications allow you to perform web automation tasks, scraping, and browser-based operations without the overhead of running a full browser instance, making them ideal for edge computing environments.

Requirements

Before you begin, ensure you have:

Code

This is a code example of how to use browserless with Azion Edge Functions to take a screenshot. The complete code example you can find in this GitHub repository.

import { Hono } from "hono";
import { fire } from "hono/service-worker";
const app = new Hono();
const TOKEN = process.env.PUPPETEER_BROWSERLESS_IO_KEY!;


app.get("/screenshot", async (c) => {
  const url = c.req.query("url");
  const headers = {
    "Cache-Control": "no-cache",
    "Content-Type": "application/json",
  };


  const response = await fetch(
    `https://production-sfo.browserless.io/screenshot?token=${TOKEN}`,
    {
      method: "POST",
      headers: headers,
      body: JSON.stringify({
        url: url || "https://www.example.com",
        options: {
          type: "png",
        },
      }),
    }
  );


  if (!response.ok) {
    const status = response.status;
    return c.html(await response.text(), status as any);
  }


  const arrayBuffer = await response.arrayBuffer();
  const imageBuffer = new Uint8Array(arrayBuffer);


  return c.body(imageBuffer, {
    status: 200,
    headers: {
      "Content-Type": "image/png",
    },
  });
});


fire(app);

Deploying to Azion

Step 1: Authenticate with Azion

  1. Log in to your Azion account via CLI:
Terminal window
azion login
  1. Follow the authentication prompts to connect your CLI with your Azion account.

Step 2: Create a new Edge Application from a template

  1. Initialize a new Edge Application:
Terminal window
azion init

  1. Select the template Hono Boilerplate to use for your browserless application.

  2. Follow the prompts to configure your new Edge Application.

Step 3: Deploy the Edge Function

Deploy your browserless application to Azion’s edge network:

Terminal window
azion deploy

The deployment process will:

  • Upload your Edge Function code
  • Configure the edge application
  • Set up the necessary routing rules
  • Provide you with a unique domain

Step 4: Access your application

After deployment, you’ll receive a domain like https://xxxxxxx.map.azionedge.net. Your browserless application will be available at this URL within a few minutes after DNS propagation.

Understanding the implementation

Edge Function structure

The browserless Edge Function typically includes:

  • Request handling: Processing incoming HTTP requests
  • Browser automation logic: Implementing browserless operations
  • Response formatting: Returning results in the appropriate format
  • Error handling: Managing failures and edge cases

Key benefits

  • Performance: Runs at the edge, reducing latency
  • Scalability: Automatically scales with demand
  • Cost-effective: No need to maintain browser instances
  • Security: Isolated execution environment

Common use cases

  • Web scraping and data extraction
  • PDF generation from HTML
  • Screenshot capture
  • Form automation
  • API testing and monitoring

Testing your browserless application

  1. Functionality testing: Verify all automation features work correctly
  2. Performance testing: Ensure response times meet your requirements
  3. Error handling: Test edge cases and error scenarios
  4. Security testing: Validate input sanitization and output security

Troubleshooting

Common issues and solutions

  • Deployment failures: Check your environment variables and build process
  • Runtime errors: Review Edge Function logs in Azion Console
  • Performance issues: Optimize your browserless operations for edge execution
  • Memory limitations: Ensure your operations stay within Edge Function memory limits

Next steps

  • Explore advanced browserless automation techniques
  • Implement monitoring and logging for your application
  • Consider integrating with other Azion products like Edge Storage
  • Scale your application based on usage patterns