Updates for Drupal 10.x and React 18.

Author: eojthebrave

.gitignore

@@ -20,6 +20,7 @@
 /drupal/web/sites/*/translations
 /drupal/web/sites/*/tmp
 /drupal/web/sites/*/cache
+/drupal/web/themes/react_example_theme/js/dist_dev
 
 # Ignore testing related files
 /drupal/web/sites/simpletest

README.md

@@ -1,12 +1,14 @@
-# Drupalize.Me React & Drupal 8 Code Examples
+# Drupalize.Me React & Drupal Code Examples
 
 This repo contains the example code used in the https://drupalize.me/series/drupal-8-and-reactjs series.
 
 **Note:** The `hello-world` branch contains a trimmed down version of the code that reflects the application as it would be after completing this tutorial covering how to [Connect React to a Drupal Theme or Module](https://drupalize.me/tutorial/connect-react-drupal-theme-or-module?p=3253).
 
-## Drupal 8
+## Drupal
 
-The /drupal directory contains a Drupal 8 project with basic configuration for JSON:API, and to demonstrate embedding a React application inside a Drupal theme or module.
+The /drupal directory contains a Drupal 10 project with basic configuration for JSON:API, and to demonstrate embedding a React application inside a Drupal theme or module.
+
+See the `drupal-9` branch for older examples including Drupal 8/9 and React 16.
 
 Install all the Drupal dependencies:
 
@@ -51,14 +53,14 @@ npm run start:hmr
 
 ## Decoupled React Application
 
-The _/react-decoupled_ directory contains an example decoupled React application built with create-react-app. It is built to interact with the API provided by Drupal 8 installed in _/drupal_.
+The _/react-decoupled_ directory contains an example decoupled React application built with create-react-app. It is built to interact with the API provided by Drupal installed in _/drupal_.
 
 To download dependencies and start the local development server run:
 
 ```bash
 cd react-decoupled
-yarn install
-yarn run start
+npm install
+npm run start
 ```
 
 You might need to update some configuration to make sure it points to your local Drupal installation.

drupal/.ddev/config.yaml

@@ -1,29 +1,21 @@
-APIVersion: v1.13.0
 name: react-tutorials-2
-type: drupal8
+type: drupal10
 docroot: web
-php_version: "7.3"
+php_version: "8.2"
 webserver_type: nginx-fpm
 router_http_port: "80"
 router_https_port: "443"
 xdebug_enabled: false
 additional_hostnames: []
 additional_fqdns: []
-nfs_mount_enabled: false
-provider: default
+database:
+    type: mariadb
+    version: "10.4"
 use_dns_when_possible: true
-timezone: ""
+composer_version: "2"
+web_environment: []
 
-
-# This config.yaml was created with ddev version v1.13.0
-# webimage: drud/ddev-webserver:v1.13.0
-# dbimage: drud/ddev-dbserver-mariadb-10.2:v1.13.0
-# dbaimage: phpmyadmin/phpmyadmin:5
-# However we do not recommend explicitly wiring these images into the
-# config.yaml as they may break future versions of ddev.
-# You can update this config.yaml using 'ddev config'.
-
-# Key features of ddev's config.yaml:
+# Key features of DDEV's config.yaml:
 
 # name: <projectname> # Name of the project, automatically provides
 #   http://projectname.ddev.site and https://projectname.ddev.site
@@ -32,38 +24,64 @@ timezone: ""
 
 # docroot: <relative_path> # Relative path to the directory containing index.php.
 
-# php_version: "7.3"  # PHP version to use, "5.6", "7.0", "7.1", "7.2", "7.3", "7.4"
+# php_version: "8.1"  # PHP version to use, "5.6", "7.0", "7.1", "7.2", "7.3", "7.4", "8.0", "8.1", "8.2", "8.3"
 
-# 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,
+# You can explicitly specify the webimage 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
+# database:
+#   type: <dbtype> # mysql, mariadb, postgres
+#   version: <version> # database version, like "10.4" or "8.0"
+#   MariaDB versions can be 5.5-10.8 and 10.11, MySQL versions can be 5.5-8.0
+#   PostgreSQL versions can be 9-16.
+
+# router_http_port: <port>  # Port to be used for http (defaults to global configuration, usually 80)
+# router_https_port: <port> # Port for https (defaults to global configuration, usually 443)
 
-# 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.
 
-# xdebug_enabled: false  # Set to true to enable xdebug and "ddev start" or "ddev restart"
+# xhprof_enabled: false  # Set to true to enable Xhprof and "ddev start" or "ddev restart"
 # Note that for most people the commands
-# "ddev exec enable_xdebug" and "ddev exec disable_xdebug" work better,
-# as leaving xdebug enabled all the time is a big performance hit.
+# "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  # Can be set to apache-fpm or apache-cgi as well
+# webserver_type: nginx-fpm, apache-fpm, or nginx-gunicorn
 
 # 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_root: <relative_path>
+# Relative path to the Composer root directory from the project root. This is
+# the directory which contains the composer.json and where all Composer related
+# commands are executed.
+
+# composer_version: "2"
+# You can set it to "" or "2" (default) for Composer v2 or "1" for Composer v1
+# to use the latest major version available at the time your container is built.
+# It is also possible to use each other Composer version channel. This includes:
+#   - 2.2 (latest Composer LTS version)
+#   - stable
+#   - preview
+#   - snapshot
+# Alternatively, an explicit Composer version may be specified, for example "2.2.18".
+# To reinstall Composer after the image was built, run "ddev debug refresh".
+
+# nodejs_version: "18"
+# change from the default system Node.js version to another supported version, like 16, 18, 20.
+# Note that you can use 'ddev nvm' or nvm inside the web container to provide nearly any
+# Node.js version, including v6, etc.
+# You only need to configure this if you are not using nvm and you want to use a major
+# version that is not the default.
+
 # additional_hostnames:
 #  - somename
 #  - someothername
@@ -76,8 +94,26 @@ timezone: ""
 # 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 custom/upload/dir.
+# upload_dirs: "custom/upload/dir"
+#
+# upload_dirs:
+#   - custom/upload/dir
+#   - ../private
+#
+# would set the destination paths for ddev import-files to <docroot>/custom/upload/dir
+# When Mutagen is enabled this path is bind-mounted so that all the files
+# in the upload_dirs don't have to be synced into Mutagen.
+
+# disable_upload_dirs_warning: false
+# If true, turns off the normal warning that says
+# "You have Mutagen enabled and your 'php' project type doesn't have upload_dirs set"
+
+# ddev_version_constraint: ""
+# Example:
+# ddev_version_constraint: ">= 1.22.4"
+# This will enforce that the running ddev version is within this constraint.
+# See https://github.com/Masterminds/semver#checking-version-constraints for
+# supported constraint formats
 
 # working_dir:
 #   web: /var/www/html
@@ -86,15 +122,28 @@ timezone: ""
 # These values specify the destination directory for ddev ssh and the
 # directory in which commands passed into ddev exec are run.
 
-# omit_containers: ["dba", "ddev-ssh-agent"]
-# would omit the dba (phpMyAdmin) and ddev-ssh-agent containers. Currently
-# only those two containers can be omitted here.
-# Note that these containers can also be omitted globally in the
-# ~/.ddev/global_config.yaml or with the "ddev config global" command.
+# omit_containers: [db, 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.
+
+# performance_mode: "global"
+# DDEV offers performance optimization strategies to improve the filesystem
+# performance depending on your host system. Should be configured globally.
+#
+# If set, will override the global config. Possible values are:
+#   - "global":  uses the value from the global config.
+#   - "none":    disables performance optimization for this project.
+#   - "mutagen": enables Mutagen for this project.
+#   - "nfs":     enables NFS for this project.
+#
+# See https://ddev.readthedocs.io/en/latest/users/install/performance/#nfs
+# See https://ddev.readthedocs.io/en/latest/users/install/performance/#mutagen
 
-# 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
+# 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
@@ -112,13 +161,15 @@ timezone: ""
 # The host port binding for the ddev-dbserver can be explicitly specified. It is dynamic
 # unless explicitly specified.
 
-# phpmyadmin_port: "1000"
-# The PHPMyAdmin port can be changed from the default 8036
+# mailpit_http_port: "8025"
+# mailpit_https_port: "8026"
+# The Mailpit ports can be changed from the default 8025 and 8026
 
-# mailhog_port: "1001"
-# The MailHog port can be changed from the default 8025
+# host_mailpit_port: "8025"
+# The mailpit 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: [php-yaml, php7.3-ldap]
+# 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]
@@ -136,21 +187,87 @@ timezone: ""
 # If you prefer you can change this to "ddev.local" to preserve
 # pre-v1.9 behavior.
 
-# ngrok_args: --subdomain mysite --auth username:pass
+# ngrok_args: --basic-auth username:pass1234
 # Provide extra flags to the "ngrok http" command, see
-# https://ngrok.com/docs#http or run "ngrok http -h"
+# https://ngrok.com/docs/ngrok-agent/config 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 AdditionalSettings.php
+# 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.
 
-# provider: default # Currently either "default" or "pantheon"
+# 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 the localhost interface only. This means that ports
+# will be available on the local network if the host firewall
+# allows it.
+
+# default_container_timeout: 120
+# The default time that DDEV waits for all containers to become ready can be increased from
+# the default 120. This helps in importing huge databases, for example.
+
+#web_extra_exposed_ports:
+#- name: nodejs
+#  container_port: 3000
+#  http_port: 2999
+#  https_port: 3000
+#- name: something
+#  container_port: 4000
+#  https_port: 4000
+#  http_port: 3999
+# Allows a set of extra ports to be exposed via ddev-router
+# Fill in all three fields even if you don’t intend to use the https_port!
+# If you don’t add https_port, then it defaults to 0 and ddev-router will fail to start.
 #
-# Many ddev commands can be extended to run tasks before or after the
-# ddev command is executed, for example "post-start", "post-import-db",
+# The port behavior on the ddev-webserver must be arranged separately, for example
+# using web_extra_daemons.
+# For example, with a web app on port 3000 inside the container, this config would
+# expose that web app on https://<project>.ddev.site:9999 and http://<project>.ddev.site:9998
+# web_extra_exposed_ports:
+#  - name: myapp
+#    container_port: 3000
+#    http_port: 9998
+#    https_port: 9999
+
+#web_extra_daemons:
+#- name: "http-1"
+#  command: "/var/www/html/node_modules/.bin/http-server -p 3000"
+#  directory: /var/www/html
+#- name: "http-2"
+#  command: "/var/www/html/node_modules/.bin/http-server /var/www/html/sub -p 3000"
+#  directory: /var/www/html
+
+# override_config: false
+# By default, config.*.yaml files are *merged* into the configuration
+# But this means that some things can't be overridden
+# For example, if you have 'use_dns_when_possible: true'' you can't override it with a merge
+# and you can't erase existing hooks or all environment variables.
+# However, with "override_config: true" in a particular config.*.yaml file,
+# 'use_dns_when_possible: false' can override the existing values, and
+# hooks:
+#   post-start: []
+# or
+# web_environment: []
+# or
+# additional_hostnames: []
+# can have their intended affect. 'override_config' affects only behavior of the
+# config.*.yaml file it exists in.
+
+# 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
+# See https://ddev.readthedocs.io/en/stable/users/extend/custom-commands/ for more
 # information on the commands that can be extended and the tasks you can define
 # for them. Example:
 #hooks:

drupal/.gitattributes

@@ -19,24 +19,24 @@
 *.config  text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
 *.css     text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
 *.dist    text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
-*.engine  text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php
+*.engine  text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php linguist-language=php
 *.html    text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=html
-*.inc     text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php
-*.install text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php
+*.inc     text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php linguist-language=php
+*.install text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php linguist-language=php
 *.js      text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
 *.json    text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
 *.lock    text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
 *.map     text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
 *.md      text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
-*.module  text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php
-*.php     text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php
+*.module  text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php linguist-language=php
+*.php     text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php linguist-language=php
 *.po      text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
-*.profile text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php
+*.profile text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php linguist-language=php
 *.script  text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
-*.sh      text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php
+*.sh      text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php linguist-language=php
 *.sql     text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
 *.svg     text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
-*.theme   text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php
+*.theme   text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2 diff=php linguist-language=php
 *.twig    text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
 *.txt     text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2
 *.xml     text eol=lf whitespace=blank-at-eol,-blank-at-eof,-space-before-tab,tab-in-indent,tabwidth=2