Update Puppeteer Chrome recipe to support latest ddev web image version and workaround for Apple M1 arch

README.md

@@ -74,4 +74,4 @@ General information on how to do additional services and some additional example
 * [Laravel Horizon](recipes/laravel-horizon)
 * [REDAXO CMS](recipes/redaxo-cms)
 * [SSH Server](recipes/sshd): Adding a "real" sshd server in web container
-* [Puppeteer Headless Chrome support](recipes/puppeteer-headless-chrome-support/README.md)
+* [Puppeteer Chromium support](recipes/puppeteer-chromium-support/README.md)

recipes/puppeteer-chromium-support/README.md

@@ -0,0 +1,66 @@
+# Puppeteer Chromium support
+
+> ⚠️ That recipe has been updated to be compatible with latest ddev web container images and Apple Silicon M1 architecture.
+
+Npm packages like `codeceptjs` or `html-critical-webpack-plugin` which depend on [Puppeteer](https://github.com/puppeteer/puppeteer/) will not be able to launch the bundled chromium binary from within the web container because of some missing Linux libraries.
+
+Furthermore, for now, the bundled chromium version will not run on Apple Silicon M1 architecture. This recipe provides a workaround to use a native chromium package instead of the one provided by Puppeteer.
+
+You can add chromium support to your ddev project by adding the following extra Debian packages to your `config.yaml` file:
+
+```yaml
+webimage_extra_packages: [gconf-service, libasound2, libatk1.0-0, libcairo2, libgconf-2-4,
+  libgdk-pixbuf2.0-0, libgtk-3-0, libnspr4, libpango-1.0-0, libpangocairo-1.0-0, libx11-xcb1,
+  libxcomposite1, libxcursor1, libxdamage1, libxfixes3, libxi6, libxrandr2, libxrender1,
+  libxss1, libxtst6, fonts-liberation, libnss3, xdg-utils]
+```
+
+For Apple Silicon M1 support, you will have to override that configuration by adding a `config.m1.yaml` file in your ddev folder along with the `config.yaml` one with the following content:
+
+```yaml
+webimage_extra_packages : [chromium]
+web_environment:
+- CPPFLAGS=-DPNG_ARM_NEON_OPT=0
+- PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium
+- PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
+```
+
+## Puppeteer CSS Demo
+
+You will find a proof of concept in the [demo](demo/) folder.
+
+It is based on the [Tailwind CSS Landing Page starter project](https://github.com/tailwindtoolbox/Landing-Page) and demonstrate how to use [Webpack Encore](https://symfony.com/doc/current/frontend.html) to compile javascript and css resources and extract critical CSS with critical-css-webpack-plugin from within the ddev web container.
+
+Obviously, the PHP part is quite minimalistic and is just used to read the webpack manifest file to inject relevant javascript and css files and inline the critical css file in the landing page. However, the overall workflow can easily be adapted in a more complex PHP project using a CMS or a framework.
+
+> In order to run the demo project on Apple Silicon M1, rename the `config.m1.yaml.dist` to `config.m1.yaml` before starting ddev.
+
+### Startup
+
+For the root of the [demo](demo/) folder, start the ddev environment:
+
+```
+ddev start
+```
+
+The provided `.ddev/config.yaml` is pre-configured to include the needed `webimage_extra_packages` in order to run the `html-critical-webpack-plugin`.
+
+### Installation
+
+To install the node dependencies, run `ddev yarn install`
+
+### Generate the webpack assets and the critical CSS file
+
+Run `ddev yarn build`
+
+This will generate optimized javascript and css files in `web/webpack-assets` folder along with the critical css file in the `web/criticalcss` folder using the html-critical-webpack-plugin.
+
+Under the hood, html-critical-webpack-plugin will instantiate a headless Chrome using Puppeteer to access the landing page hosted by ddev in order to extact relevant critical css.
+
+At that stage you should be able to view the landing page at `https://demo.ddev.site`.
+
+You can see how the plugin is triggered by opening the `webpack.config.js` configuration file.
+
+A `yarn dev` and `yarn watch` scripts are also provided as examples.
+
+## Original Author: [@juban](https://github.com/juban)

recipes/puppeteer-chromium-support/demo/.ddev/config.m1.yaml.dist

@@ -0,0 +1,5 @@
+webimage_extra_packages : [chromium]
+web_environment:
+- CPPFLAGS=-DPNG_ARM_NEON_OPT=0
+- PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium
+- PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true

recipes/puppeteer-chromium-support/demo/.ddev/config.yaml

@@ -0,0 +1,199 @@
+name: demo
+type: php
+docroot: web
+php_version: "7.4"
+webserver_type: nginx-fpm
+router_http_port: "80"
+router_https_port: "443"
+xdebug_enabled: false
+additional_hostnames: []
+additional_fqdns: []
+mariadb_version: "10.3"
+mysql_version: ""
+nfs_mount_enabled: false
+mutagen_enabled: false
+omit_containers: [db, dba]
+webimage_extra_packages: [gconf-service, libasound2, libatk1.0-0, libcairo2, libgconf-2-4,
+  libgdk-pixbuf2.0-0, libgtk-3-0, libnspr4, libpango-1.0-0, libpangocairo-1.0-0, libx11-xcb1,
+  libxcomposite1, libxcursor1, libxdamage1, libxfixes3, libxi6, libxrandr2, libxrender1,
+  libxss1, libxtst6, fonts-liberation, libnss3, xdg-utils]
+use_dns_when_possible: true
+composer_version: "2"
+web_environment: []
+
+# Key features of ddev's config.yaml:
+
+# name: <projectname> # Name of the project, automatically provides
+#   http://projectname.ddev.site and https://projectname.ddev.site
+
+# type: <projecttype>  # drupal6/7/8, backdrop, typo3, wordpress, php
+
+# docroot: <relative_path> # Relative path to the directory containing index.php.
+
+# php_version: "7.4"  # PHP version to use, "5.6", "7.0", "7.1", "7.2", "7.3", "7.4", "8.0", "8.1"
+
+# You can explicitly specify the webimage, dbimage, dbaimage lines but this
+# is not recommended, as the images are often closely tied to ddev's' behavior,
+# so this can break upgrades.
+
+# webimage: <docker_image>  # nginx/php docker image.
+# dbimage: <docker_image>  # mariadb docker image.
+# dbaimage: <docker_image>
+
+# mariadb_version and mysql_version
+# ddev can use many versions of mariadb and mysql
+# However these directives are mutually exclusive
+# mariadb_version: 10.2
+# mysql_version: 8.0
+
+# router_http_port: <port>  # Port to be used for http (defaults to port 80)
+# router_https_port: <port> # Port for https (defaults to 443)
+
+# xdebug_enabled: false  # Set to true to enable xdebug and "ddev start" or "ddev restart"
+# Note that for most people the commands
+# "ddev xdebug" to enable xdebug and "ddev xdebug off" to disable it work better,
+# as leaving xdebug enabled all the time is a big performance hit.
+
+# xhprof_enabled: false  # Set to true to enable xhprof and "ddev start" or "ddev restart"
+# Note that for most people the commands
+# "ddev xhprof" to enable xhprof and "ddev xhprof off" to disable it work better,
+# as leaving xhprof enabled all the time is a big performance hit.
+
+# webserver_type: nginx-fpm  # or apache-fpm
+
+# timezone: Europe/Berlin
+# This is the timezone used in the containers and by PHP;
+# it can be set to any valid timezone,
+# see https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
+# For example Europe/Dublin or MST7MDT
+
+# composer_version: "2"
+# if composer_version:"2" it will use the most recent composer v2
+# It can also be set to "1", to get most recent composer v1
+# or "" for the default v2 created at release time.
+# It can be set to any existing specific composer version.
+# After first project 'ddev start' this will not be updated until it changes
+
+# additional_hostnames:
+#  - somename
+#  - someothername
+# would provide http and https URLs for "somename.ddev.site"
+# and "someothername.ddev.site".
+
+# additional_fqdns:
+#  - example.com
+#  - sub1.example.com
+# would provide http and https URLs for "example.com" and "sub1.example.com"
+# Please take care with this because it can cause great confusion.
+
+# upload_dir: custom/upload/dir
+# would set the destination path for ddev import-files to <docroot>/custom/upload/dir 
+
+# working_dir:
+#   web: /var/www/html
+#   db: /home
+# would set the default working directory for the web and db services.
+# These values specify the destination directory for ddev ssh and the
+# directory in which commands passed into ddev exec are run.
+
+# omit_containers: [db, dba, ddev-ssh-agent]
+# Currently only these containers are supported. Some containers can also be
+# omitted globally in the ~/.ddev/global_config.yaml. Note that if you omit
+# the "db" container, several standard features of ddev that access the
+# database container will be unusable. In the global configuration it is also
+# possible to omit ddev-router, but not here.
+
+# nfs_mount_enabled: false
+# Great performance improvement but requires host configuration first.
+# See https://ddev.readthedocs.io/en/stable/users/performance/#using-nfs-to-mount-the-project-into-the-container
+
+# mutagen_enabled: false
+# Experimental performance improvement using mutagen asynchronous updates.
+# See https://ddev.readthedocs.io/en/latest/users/performance/#using-mutagen
+
+# fail_on_hook_fail: False
+# Decide whether 'ddev start' should be interrupted by a failing hook
+
+# host_https_port: "59002"
+# The host port binding for https can be explicitly specified. It is
+# dynamic unless otherwise specified.
+# This is not used by most people, most people use the *router* instead
+# of the localhost port.
+
+# host_webserver_port: "59001"
+# The host port binding for the ddev-webserver can be explicitly specified. It is
+# dynamic unless otherwise specified.
+# This is not used by most people, most people use the *router* instead
+# of the localhost port.
+
+# host_db_port: "59002"
+# The host port binding for the ddev-dbserver can be explicitly specified. It is dynamic
+# unless explicitly specified.
+
+# phpmyadmin_port: "8036"
+# phpmyadmin_https_port: "8037"
+# The PHPMyAdmin ports can be changed from the default 8036 and 8037
+
+# host_phpmyadmin_port: "8036"
+# The phpmyadmin (dba) port is not normally bound on the host at all, instead being routed
+# through ddev-router, but it can be specified and bound.
+
+# mailhog_port: "8025"
+# mailhog_https_port: "8026"
+# The MailHog ports can be changed from the default 8025 and 8026
+
+# host_mailhog_port: "8025"
+# The mailhog port is not normally bound on the host at all, instead being routed
+# through ddev-router, but it can be bound directly to localhost if specified here.
+
+# webimage_extra_packages: [php7.4-tidy, php-bcmath]
+# Extra Debian packages that are needed in the webimage can be added here
+
+# dbimage_extra_packages: [telnet,netcat]
+# Extra Debian packages that are needed in the dbimage can be added here
+
+# use_dns_when_possible: true
+# If the host has internet access and the domain configured can
+# successfully be looked up, DNS will be used for hostname resolution
+# instead of editing /etc/hosts
+# Defaults to true
+
+# project_tld: ddev.site
+# The top-level domain used for project URLs
+# The default "ddev.site" allows DNS lookup via a wildcard
+# If you prefer you can change this to "ddev.local" to preserve
+# pre-v1.9 behavior.
+
+# ngrok_args: --subdomain mysite --auth username:pass
+# Provide extra flags to the "ngrok http" command, see
+# https://ngrok.com/docs#http or run "ngrok http -h"
+
+# disable_settings_management: false
+# If true, ddev will not create CMS-specific settings files like
+# Drupal's settings.php/settings.ddev.php or TYPO3's AdditionalConfiguration.php
+# In this case the user must provide all such settings.
+
+# You can inject environment variables into the web container with:
+# web_environment:
+# - SOMEENV=somevalue
+# - SOMEOTHERENV=someothervalue
+
+# no_project_mount: false
+# (Experimental) If true, ddev will not mount the project into the web container;
+# the user is responsible for mounting it manually or via a script.
+# This is to enable experimentation with alternate file mounting strategies.
+# For advanced users only!
+
+# bind_all_interfaces: false
+# If true, host ports will be bound on all network interfaces,
+# not just the localhost interface. This means that ports
+# will be available on the local network if the host firewall
+# allows it.
+
+# Many ddev commands can be extended to run tasks before or after the
+# ddev command is executed, for example "post-start", "post-import-db",
+# "pre-composer", "post-composer"
+# See https://ddev.readthedocs.io/en/stable/users/extending-commands/ for more
+# information on the commands that can be extended and the tasks you can define
+# for them. Example:
+#hooks:

recipes/puppeteer-headless-chrome-support/demo/package.json → recipes/puppeteer-chromium-support/demo/package.json

@@ -3,9 +3,9 @@
     "@fullhuman/postcss-purgecss": "^2.1.0",
     "@symfony/webpack-encore": "^0.28.3",
     "autoprefixer": "^9.7.4",
-    "critical": "^1.3.9",
-    "critical-css-webpack-plugin": "^0.2.0",
+    "critical": "^4.0.1",
     "cross-env": "^7.0.2",
+    "html-critical-webpack-plugin": "^2.1.0",
     "postcss": "^7.0.27",
     "postcss-loader": "^3.0.0",
     "purgecss": "^2.1.0",

recipes/puppeteer-headless-chrome-support/demo/tailwind.config.js → recipes/puppeteer-chromium-support/demo/tailwind.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+    purge:false,
     theme: {
         extend: {
             spacing: {

recipes/puppeteer-headless-chrome-support/demo/webpack.config.js → recipes/puppeteer-chromium-support/demo/webpack.config.js

@@ -1,5 +1,5 @@
 var Encore = require('@symfony/webpack-encore');
-var CriticalCssPlugin = require('critical-css-webpack-plugin');
+var CriticalCssPlugin = require('html-critical-webpack-plugin');
 
 const sane = require("sane");
 const path = require("path");