brownuniversity/dreact

D8 Module to integrate react applications into pages.

Brown D8React Integration

Brown D8React Integration is a Drupal 8 module for handling the insertion of compiled react applications.

Installation

Using Composer, Add the repository:

{
  "type": "vcs",
  "url": "[email protected]:webserv/brown-d8react-integration.git"
}

and require the module:

"require": {
  "webserv/brown-d8react-integration": "dev-master"
}

Run composer install, and the module will be available to be enabled via the Drupal interface.

Usage

Inserting an App

1. Add a new Basic Page content type.
2. In the section Below Content Components in the dropdown, select Add React App
3. In the React Apps dropdown, select the name of the app.
4. Save the page, and the React App will render in the Below Content Components block.

Adding a new App

1. Compile the app down to a single .js file
2. Add the app to the /apps directory

Note: The .js filename will be used as the ID of the DIV that the app is rendered in, as well as the entry in the select menu with - converted to spaces, and individual words capitalized.

Example: todo-app.js needs to be looking for <div id='todo-app'></div> as its base div, and will display in the menu as Todo App

dreact's Issues

PHP 8 Errors

OUC needs the following PHP 8 specific errors addresses in this module. See the attached log. Work with Gladys to coordinate how this will eventually get deployed.

single-export-brown_d8react_integration-2023-05-03T14_16_16-0400.txt

DReact Courses: dynamic heading option

We would like the ability/option to add a term header above course lists. For instances where the key/value pair term/auto is being used, we would like the header to change along with the list of courses.

Implement noscript for DReact

To better equip Google's crawler to find DReact related content (like a list of links on the Policies site), modify the dreact module to inject a list of links into a <noscript> tag derived from the assigned endpoint (Drupal View) on the page that the DReact app is embedded.

This injection should only happen when the DReact app is set as "search-filter" (DSF).

Example endpoint view value: https://dev.policy.brown.edu/dsf_combined

Expected behavior:

• If running search-filter and JS is enabled, display DReact app as usual
• If running search-filter and JS is disabled, print a list of links with titles to the page within a <noscript> tag
• If running any other DReact app (other than search-filter, display DReact app as usual

DReact Courses: query courses by Instructor

In the DReact Courses app we would like the ability to pass a key/value pair to allow querying by instructor.

• It has been confirmed there is an API endpoint that would support this

Drupal react frontend

I want to create a drupal website which has react frontend so that everything or most of the things on the website, load in real time. What should I do? Can you guide to the right direction?

I am good with drupal, but do not know anything about this stuff.

Allow Filtering By Multiple Taxonomy Groups

We would like the DReact Search Filter to allow filtering by multiple taxonomy groups. Below are two real-world use cases:

Policy Website

Two taxonomy groups: one is nested (parent/child) and the second is flat

DSF: https://dsf-brownu-policy.pantheonsite.io/dsf-20-policy
Endpoint View: https://dsf-brownu-policy.pantheonsite.io/admin/structure/views/view/dsf_2_0_parent_child/edit/page_7

Health & Wellness Website

Two taxonomy groups: both flat

DSF: https://gl-dsf-brownu-healthwellness.pantheonsite.io/dsf-2
Endpoint View: https://gl-dsf-brownu-healthwellness.pantheonsite.io/admin/structure/views/view/dsf_2_combined