Headless Chrome

Headless Chrome is a headless browser that can be configured on projects like any other service on Upsun.

You can interact with the chrome-headless service container using Puppeteer, a Node.js library that provides an API to control Chrome over the DevTools Protocol.

Puppeteer can be used to generate PDFs and screenshots of web pages, automate form submission, and test your project’s UI. You can find out more information about using Puppeteer on GitHub or in their documentation.

Supported versions

You can select the major version. But the latest compatible minor version is applied automatically and can’t be overridden.

Patch versions are applied periodically for bug fixes and the like. When you deploy your app, you always get the latest available patches.

• 120
• 113
• 95
• 91
• 86
• 84
• 83
• 81
• 80
• 73

Relationship reference

Example information available through the PLATFORM_RELATIONSHIPS environment variable or by running upsun relationships.

Note that the information about the relationship can change when an app is redeployed or restarted or the relationship is changed. So your apps should only rely on the PLATFORM_RELATIONSHIPS environment variable directly rather than hard coding any values.

{
    "service": "headlesschrome",
    "ip": "169.254.91.5",
    "hostname": "gvbo7vktgmou2mplnzt4b54hgi.headlesschrome.service._.eu-3.upsunapp.com",
    "cluster": "rjify4yjcwxaa-master-7rqtwti",
    "host": "headlesschrome.internal",
    "rel": "http",
    "scheme": "http",
    "type": "chrome-headless:120",
    "port": 9222
}

Requirements

Puppeteer requires at least Node.js version 6.4.0, while using the async and await examples below requires Node 7.6.0 or greater.

If your app container uses a language other than Node.js, upgrade the Node.js version before using Puppeteer. See how to manage your Node.js version.

Usage example

1. Configure the service

To define the service, use the chrome-headless type:

services:
    # The name of the service container. Must be unique within a project.
    <SERVICE_NAME>:
        type: chrome-headless:<VERSION>

Note that changing the name of the service replaces it with a brand new service and all existing data is lost. Back up your data before changing the service.

2. Add the relationship

To define the relationship, use the http endpoint :

applications:
    # The name of the app container. Must be unique within a project.
    <APP_NAME>:
        # Relationships enable access from this app to a given service.
        relationships:
            <RELATIONSHIP_NAME>: "<SERVICE_NAME>:http"

services:
    # The name of the service container. Must be unique within a project.
    <SERVICE_NAME>:
        type: chrome-headless:<VERSION>

You can define <SERVICE_NAME> and <RELATIONSHIP_NAME> as you like, but it’s best if they’re distinct. With this definition, the application container (<APP_NAME>) now has access to the service via the relationship <RELATIONSHIP_NAME>.

Example Configuration

App and Service configuration

applications:
    # The name of the app container. Must be unique within a project.
    myapp:
        # Relationships enable access from this app to a given service.
        relationships:
            chromeheadlessbrowser: "headlessbrowser:http"

services:
    # The name of the service container. Must be unique within a project.
    headlessbrowser:
        type: chrome-headless:120

Use in app

After configuration, include Puppeteer as a dependency:

npm install puppeteer

pnpm add puppeteer

yarn add puppeteer

Configuration for a project looks similar to the following:

applications:
    # The name of the app container. Must be unique within a project.
    myapp:
        # The location of the application's code.
        source:
            root: "myapp"
        type: "nodejs:20"
        
        # Other options...
        
        # Relationships enable an app container's access to a service.
        relationships:
            chromeheadlessbrowser: "headlessbrowser:http"
services:
    # The name of the service container. Must be unique within a project.
    headlessbrowser:
        type: chrome-headless:120

This configuration defines a single application myapp, whose source code exists in the directory <PROJECT_ROOT>/myapp, and has been provided access to the service (headlessbrowser) via the relationship chromeheadlessbrowser.

From this, myapp can retrieve access credentials to the service through the environment variable PLATFORM_RELATIONSHIPS. That variable is a base64-encoded JSON object, but can be decoded at runtime (using the built-in tool jq) to provide more accessible environment variables to use within the application itself:

# Decode the built-in credentials object variable.
export RELATIONSHIPS_JSON=$(echo $PLATFORM_RELATIONSHIPS | base64 --decode)

# Set environment variables for individual credentials.
export CHROME_IP=$(echo $RELATIONSHIPS_JSON | jq -r ".chromeheadlessbrowser[0].ip")
export CHROME_PORT=$(echo $RELATIONSHIPS_JSON | jq -r ".chromeheadlessbrowser[0].port")

# Combine into a single base URL to be used within app.
export CHROME_BASEURL="http://${CHROME_IP}:${CHROME_PORT}"

The above file — .environment in the myapp directory — is automatically sourced by Upsun into the runtime environment, so that the variable CHROME_BASEURL can be used within the application to connect to the service.

Note that CHROME_BASEURL, and all Upsun-provided environment variables like PLATFORM_RELATIONSHIPS, are environment-dependent. Unlike the build produced for a given commit, they can’t be reused across environments and only allow your app to connect to a single service instance on a single environment.

A file very similar to this is generated automatically for your when using the upsun ify command to migrate a codebase to Upsun.

Puppeteer allows your application to create screenshots, emulate a mobile device, generate PDFs, and much more.