The goal for this exercise is to create a custom Drupal theme that includes a React app as part of its codebase. The React app will be stored in its own directory within the theme and will be attached to a theme template using libraries.yml.
For an additional challenge, you may have this app display conditionally based on the value of a custom field on a content type. You can also try adding a second React app and configuring the apps to share dependencies between them.
- A new custom drupal theme has been created
- The theme can be created manually or using the Starterkit theme generator
- A React app has been added to the theme
- A library pointing to the production build of the React app has been created in THEME_NAME.libraries.yml
- The React app has been added to a theme template and is shown on at least one page on the site
- [Challenge] A boolean field has been added to a content type and the React app will only show on the page if that custom field is set to true
- [Challenge] Multiple React apps are added to the same page and both apps utilize the same 'react' and 'react-dom' dependencies
- Tutorial: Connect React to a Drupal Theme or Module
- Documentation: Create a new Drupal Starter Kit theme
- Documentation: Theming Drupal
- Documentation: Adding assets (CSS, JS) to a Drupal theme via *.libraries.yml
- Cheat Sheet: Drupal Theming Cheat Sheet
- Documentation: Preprocessing and modifying attributes in a .theme file
- Documentation: Rollup Configuration options - input
- Note that applications can have multiple entry points
Skip to step 3 if Docker and DDEV are already installed.
- Install Docker or Colima
- Install DDEV
- Clone this repo to your local machine
cdto the root of the project- Run the setup commands below in you terminal
ddev start
ddev composer install
ddev site-install p2Run the launch command to open the site unauthenticated
ddev launchOr run the drush user login command to generate a one-time login
ddev drush uli