Anthony Chu Contact Me

Serverless Playwright the easy way with Azure Container Apps

Thursday, August 31, 2023

In the three years since I wrote about running headless browsers with Playwright and Puppeteer in Azure Functions, I've regularly received questions about it. While it's clear that there's a lot of interest in this topic, it's also clear that it's not the easiest thing to do. Running Playwright or Puppeteer in Azure Functions requires very specific dependencies and deployment steps that are difficult to get right.

I still love Azure Functions, but I now work on Azure Container Apps, a service that makes it easy to run containerized apps and microservices. In many ways, the two services are quite similar — they're both serverless with a consumption-based pricing model; and they both support HTTP and event-driven workloads. But while Azure Functions offers a super productive programming model, Container Apps offers the flexibility and control that comes from running in containers.

Because we need a highly customized compute environment to run Playwright (or Puppeteer), it's a great fit for containers and Azure Container Apps. Some of the benefits of running Playwright in Azure Container Apps include:

  • Get full control over the container image. Playwright ships a pre-built image that we can use that already has all required dependencies installed. We can add our app and anything else we need to run it.
  • Run Chromium, Firefox, and WebKit. Playwright's image supports and comes with all three browsers.
  • Pay only for what we use. Azure Container Apps is a serverless platform that scales our app to zero when there are no requests. We only pay for the time our app is running.
  • Eliminate cold starts. Azure Container Apps offers an optional idle billing mode that keeps our app running at all times so there are no cold starts. We're charged a much lower rate when the app is idle and isn't processing requests.

In this article, we'll look at how to run Playwright in Azure Container Apps in a web API scenario. We'll use Playwright to take a screenshot of a web page and return it as a response. In a follow up article, we'll look at how to run Playwright in Azure Container Apps using a scheduled job.

Continue Reading...


Restrict Active Directory Login with Azure Static Web Apps Custom Authentication

Monday, February 7, 2022

Azure Static Web Apps includes built-in authentication with identity providers such as Azure Active Directory and GitHub. There's no configuration required to allow users to log in to a static web app.

The built-in Azure Active Directory authentication allows accounts from any Azure AD or personal Microsoft Accounts to log in. To restrict login to users in a specific Azure AD tenant or to specific users in an Azure AD tenant, we can configure Azure Static Web Apps custom authentication.

Continue Reading...


Rendering PDFs with Razor Templates and PuppeteerSharp in Azure Functions

Saturday, September 12, 2020

A couple of weeks ago, we looked at how to use Puppeteer with Node.js Azure Functions to take screenshots of web pages. Today, we'll look at how to render PDFs in Azure Functions using Razor and the C# port of Puppeteer, PuppeteerSharp.

Update 2023-08-31: If you're having trouble running Playwright or Puppeteer on Azure Functions, check out Serverless Playwright the easy way with Azure Container Apps.

A common usage of this is generating something like an invoice. We'll create PDF invoices for our favorite fictitious online store, Tailwind Traders.

screenshot

Overview

We'll run ASP.NET Core Razor Pages in a .NET Azure Functions app and use PuppeteerSharp with headless Chromium to render the invoice Razor template to a PDF.

architecture

In the rest of this article, we'll walk though these steps:

  1. Build an ASP.NET Core Razor Pages app that includes a Razor template and other resources required to render the invoice.
  2. Create an Azure Functions app and configure it to run PuppeteerSharp.
  3. Run the ASP.NET Core Razor Pages app in the function app.
  4. Write a function that uses PuppeteerSharp to render the invoice and generate a PDF.
  5. Deploy the app to Azure.

Continue Reading...


Running headless Chromium in Azure Functions with Puppeteer and Playwright

Monday, August 17, 2020

With a recent update to Azure Functions, it is now possible to run headless Chromium in the Linux Consumption plan. This enables some serverless browser automation scenarios using popular frameworks such as Puppeteer and Playwright.

Update 2023-08-31: If you're having trouble running Playwright or Puppeteer on Azure Functions, check out Serverless Playwright the easy way with Azure Container Apps.

Browser automation with Puppeteer and Playwright

Browser automation has been around for a long time. Selenium WebDriver was a pioneer in this space. More recently, Puppeteer and Playwright have gained in popularity. The two frameworks are very similar. Google maintains Puppeteer and Microsoft maintains Playwright. It's interesting to note that some of the folks who worked on Puppeteer are now working on Playwright.

Puppeteer and Playwright each support a different set of browsers. Both of them can automate Chromium. They automatically install Chromium and can use it without extra configuration.

Continue Reading...


Authenticate Blazor WebAssembly with Azure Static Web Apps

Tuesday, July 28, 2020

Azure Static Web Apps is a great place to host Blazor WebAssembly apps. Among Static Web Apps' many features, it has built-in support for authentication using social logins. In this article, we'll look at how we can take advantage of Static Web Apps Authentication in our Blazor WebAssembly apps.

Overview

Azure Static Web Apps takes care of dealing with identity providers like GitHub, Twitter, and Facebook. The frontend application can then access the user's credentials using a built-in API.

Blazor WebAssembly supports custom authentication providers. We'll look at how to set up an auth provider for Static Web Apps and use it in the app. We'll also look at how to properly secure certain functionality in the app so that only authenticated users have access.

Azure Static Web Apps will soon have native support for building and deploying Blazor WebAssembly. For now, take a look at Tim Heuer's article on how to deploy it.

Continue Reading...