Headless Chrome
Contents:
Headless Chrome is a headless browser that can be configured on projects like any other service on Platform.sh.
You can interact with the headless-chrome
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
Grid | Dedicated |
---|---|
|
None available |
Relationship
The format exposed in the $PLATFORM_RELATIONSHIPS
environment variable:
{
"service": "headless",
"ip": "169.254.73.96",
"hostname": "3rxha4e2w4yv36lqlypy7qlkza.headless.service._.eu-3.platformsh.site",
"cluster": "moqwtrvgc63mo-master-7rqtwti",
"host": "headless.internal",
"rel": "http",
"scheme": "http",
"type": "chrome-headless:73",
"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.
Using the Platform.sh Config Reader library requires Node.js 10 or later.
Other languages
It will be necessary to upgrade the version of Node.js in other language containers before using Puppeteer. You can use Node Version Manager or NVM to change or update the version available in your application container by following the instructions in the Alternate Node.js install documentation.
Usage example
In your .platform/services.yaml
:
headlessbrowser:
type: chrome-headless:73
In your .platform.app.yaml
:
relationships:
chromeheadlessbrowser: "headlessbrowser:http"
Note:
You will need to use
the chrome-headless
type
when defining the service
# .platform/services.yaml
service_name:
type: chrome-headless:version
and the endpoint http
when defining the relationship
# .platform.app.yaml
relationships:
relationship_name: “service_name:http”
Your service_name
and relationship_name
are defined by you, but we recommend making them distinct from each other.
After configuration, include Puppeteer as a dependency in your package.json
:
{
"dependencies": {
"puppeteer": "^1.14.0"
}
}
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('chromeheadlessbrowser');
and use them to define the browserURL
parameter of puppeteer.connect()
within an async
function:
exports.takeScreenshot = async function (url) {
try {
// Connect to chrome-headless using pre-formatted puppeteer credentials
const formattedURL = config.formattedCredentials('chromeheadlessbrowser', '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: