Platform.sh User Documentation
Edit page

Headless Chrome

Back to home

On this page

Try for 30 days
Flexible, version-controlled infrastructure provisioning and development-to-production workflows
Activate your trial

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

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 Anchor to this heading

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.

Grid Dedicated Gen 3 Dedicated Gen 2
  • 120
  • 113
  • 95
  • 91
  • 86
  • 84
  • 83
  • 81
  • 80
  • 73
  • 95
 None available

Relationship reference Anchor to this heading

Example information available through the PLATFORM_RELATIONSHIPS environment variable or by running platform 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": "chrome-headless",
  "ip": "123.456.78.90",
  "hostname": "azertyuiopqsdfghjklm.chrome-headless.service._.eu-1.platformsh.site",
  "cluster": "azertyuiop-main-7rqtwti",
  "host": "chrome-headless.internal",
  "rel": "http",
  "scheme": "http",
  "type": "chrome-headless:120",
  "port": 9222
}

Requirements Anchor to this heading

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 Anchor to this heading

1. Configure the service Anchor to this heading

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

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

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. Define the relationship Anchor to this heading

To define the relationship, use the following configuration:

.platform.app.yaml
name: myapp
# Relationships enable access from this app to a given service.
# The example below shows simplified configuration leveraging a default service
# (identified from the relationship name) and a default endpoint.
# See the Application reference for all options for defining relationships and endpoints.
relationships:
  <SERVICE_NAME>:

You can define <SERVICE_NAME> as you like, so long as it’s unique between all defined services and matches in both the application and services configuration.

The example above leverages default endpoint configuration for relationships. That is, it uses default endpoints behind-the-scenes, providing a relationship (the network address a service is accessible from) that is identical to the name of that service.

Depending on your needs, instead of default endpoint configuration, you can use explicit endpoint configuration.

With the above definition, the application container now has access to the service via the relationship <SERVICE_NAME> and its corresponding PLATFORM_RELATIONSHIPS environment variable.

.platform.app.yaml
name: myapp
# Relationships enable access from this app to a given service.
# The example below shows configuration with an explicitly set service name and endpoint.
# See the Application reference for all options for defining relationships and endpoints.
# Note that legacy definition of the relationship is still supported.
# More information: https://docs.platform.sh/create-apps/app-reference/single-runtime-image.html#relationships
relationships:
  <RELATIONSHIP_NAME>:
    service: <SERVICE_NAME>
    endpoint: http

You can define <SERVICE_NAME> and <RELATIONSHIP_NAME> as you like, so long as it’s unique between all defined services and relationships and matches in both the application and services configuration.

The example above leverages explicit endpoint configuration for relationships.

Depending on your needs, instead of explicit endpoint configuration, you can use default endpoint configuration.

With the above definition, the application container now has access to the service via the relationship <RELATIONSHIP_NAME> and its corresponding PLATFORM_RELATIONSHIPS environment variable.

Example configuration Anchor to this heading

Service definition Anchor to this heading

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

App configuration Anchor to this heading

.platform.app.yaml
name: myapp
# Relationships enable access from this app to a given service.
# The example below shows simplified configuration leveraging a default service
# (identified from the relationship name) and a default endpoint.
# See the Application reference for all options for defining relationships and endpoints.
relationships:
  chrome-headless:
.platform.app.yaml
name: myapp
# Relationships enable access from this app to a given service.
# The example below shows configuration with an explicitly set service name and endpoint.
# See the Application reference for all options for defining relationships and endpoints.
# Note that legacy definition of the relationship is still supported.
# More information: https://docs.platform.sh/create-apps/app-reference/single-runtime-image.html#relationships
relationships:
  chrome-headless:
    service: chrome-headless
    endpoint: http

Use in app Anchor to this heading

After configuration, include Puppeteer as a dependency:

npm install puppeteer
pnpm add puppeteer
yarn add puppeteer

Using the Node.js Config Reader library, you can retrieve formatted credentials for connecting to headless Chrome with Puppeteer:

const platformsh = require('platformsh-config');

const config = platformsh.config();
const credentials = config.credentials('chromeheadless');

and use them to define the browserURL parameter of puppeteer.connect() within an async function:

exports.getBrowser = async function (url) {
  try {
    // Connect to chrome-headless using pre-formatted puppeteer credentials
    const formattedURL = config.formattedCredentials('chromeheadless', 'puppeteer');
    const browser = await puppeteer.connect({browserURL: formattedURL});

    ...

    return browser

  } catch (error) {
    console.error({ error }, 'Something happened!');
    browser.close();
  }
};

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

You can find some useful examples of using headless Chrome and Puppeteer on Platform.sh on the Community Portal:

Is this page helpful?