Running Playwright on Azure Functions
npm install playwright. this command installs Playwright and browser binaries for Chromium, Firefox and WebKit. And I am installing
playwright-chromium as well, so that I can access the library in the code.
Here is my
Next modify the
index.js file like this.
This code will launch chrome instance, open a new tab, navigate to the URL in the request. Once navigation completed, it will convert the page to pdf and returns the bytes to response as PDF file.
Next I am deploying it to Azure. To do that first you need to install the Azure Extension for VS Code and Connect to your subscription.
This will connect the subscription and display your Function as Local Project. You can click on the
Blue icon - Deploy to Function app to deploy it to Azure, you can choose your existing function app or you can create one. Before deploying it to Azure you need to make sure you’re changing VS Code settings to run npm install on the server instead of development machine. To do this, select the Azure Function extension and click on the settings.
And select the option -
Azure Functions: SCM Do Build During Deployment - this will build the project on server instead of client. It is applicable only for Linux Function apps. So next I will be clicking on the Deploy to Function app icon, which will prompt few questions and which will help you to create the azure function. I choose the Create new Function app in Azure Advanced option, provided a unique name, choose
Node.js 12 LTS as the runtime stack,
Linux as the OS,
Consumption hosting plan, created new resource group, storage account and I added an application insights resource. It will deploy the function to Azure. But it might not work as expected. Because Playwright downloads Chromium to a location outside the function app’s folder. To include Chromium in the build artifacts, we need to configure Playwright to install Chromium in the app’s
node_modules folder. To do this, we need to create an app setting named
PLAYWRIGHT_BROWSERS_PATH with a value of
0 in the function app in Azure. This setting is used by Playwright at run-time to locate Chromium in
node_modules. If you’re creating the function first from portal than creating it while deployment, you can avoid deploying it again after this change.
You can also remove the
.vscode/settings.json file. Here is the updated
Now deploy it again. This will show a prompt about over writing the deployment, select Deploy option. It will deploy the app and provide the URL of the function. While deploying I found one issue - The Azure function extension setting -
SCM Do Build During Deployment was not working. So I had to include it in the settings.json like this.
Now browse the function app with a URL which will download a PDF file of the URL.
Happy Programming :)