# How to build a browserless application with Functions

import DocButton from '~/components/webkit/DocButton.vue';

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.

:::tip
This demonstration shows how to leverage Functions for browser automation tasks while maintaining high performance and security standards at the edge.
:::

## Requirements

Before you begin, ensure you have:

- An [Azion account](https://console.azion.com/)
- [Azion CLI](/en/documentation/products/azion-cli/overview/) installed and configured
- [Node.js](https://nodejs.org/) version 18 or higher
- A [Browserless](https://browserless.io/) 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](https://github.com/egermano/edge-functions-examples/tree/main/packages/browserless).

```typescript
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:

```bash
azion login
```

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

### Step 2: Create a new Application from a template

1. Initialize a new  Application:

```bash
azion init
```

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

3. Follow the prompts to configure your new Application.

### Step 3: Deploy the Function

Deploy your browserless application to Azion's edge network:

```bash
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

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

---

<DocButton href="/en/documentation/products/build/applications/functions/" label="Learn more about Functions" size="medium" />
<DocButton href="/en/documentation/products/guides/build/build-an-application/" label="Build an application" size="medium" />