How to build a browserless application with Functions

This guide demonstrates how to create a browserless application using Azion 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:

An Azion account
Azion CLI installed and configured
Node.js version 18 or higher
A Browserless API key
Basic understanding of JavaScript and Functions

Code

This is a code example of how to use browserless with Azion 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

azion login

Follow the authentication prompts to connect your CLI with your Azion account.

Step 2: Create a new Application from a template

Initialize a new Application:

azion init

Select the template Hono Boilerplate to use for your browserless application.
Follow the prompts to configure your new Application.

Step 3: Deploy the Function

Deploy your browserless application to Azion’s edge network:

azion deploy

The deployment process will:

Upload your Function code
Configure the 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

Function structure

The browserless 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

Functionality testing: Verify all automation features work correctly
Performance testing: Ensure response times meet your requirements
Error handling: Test edge cases and error scenarios
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 Function logs in Azion Console
Performance issues: Optimize your browserless operations for edge execution
Memory limitations: Ensure your operations stay within Function memory limits

Next steps

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