Skip to content

Latest commit

 

History

History
85 lines (65 loc) · 3.02 KB

1-create-custom-react-block.md

File metadata and controls

85 lines (65 loc) · 3.02 KB
Raw

Create a Custom React Block or Route

back to main project README

Summary

The goal for this exercise is to create a custom block route in Drupal that loads a React app. Alternatively, a custom controller route can be used to load the React app instead of a block. All of the code for the block or controller should be placed in a custom Drupal module.

Acceptance Criteria

  • A new Drupal module has been created
  • The new module contains a custom block plugin or controller
  • A React app been added to the module
  • The react app is added to the custom block or route and is displayed on a page

Helpful Resources

Setup Instructions

Skip to step 3 if Docker and DDEV are already installed.

  1. Install Docker or Colima
  2. Install DDEV
  3. Clone this repo to your local machine
  4. cd to the root of the project
  5. Run the setup commands below in you terminal
ddev start
ddev composer install
ddev site-install p1

Run the launch command to open the site unauthenticated

ddev launch

Or run the drush user login command to generate a one-time login

ddev drush uli

Solution Overview

This solution adds a React timer widget as a drupal block. Screenshot of an installed drupal site home page showing a timer block widget in the sidebar

The block should display in the sidebar of each page. The code for this solution is all contained in a custom module located at:

/web/modules/custom/ca_custom_block_react_timer

The frontend react app code is located at:

/web/modules/custom/ca_custom_block_react_timer/src/frontend

The compiled frontend that gets sent to the browser is located at:

/web/modules/custom/ca_custom_block_react_timer/dist

Walkthrough Video

Screen shot of Youtube video

Project shortcuts

There are a few custom DDEV commands provided for convenience

Install Drupal, enable the ca_custom_block_react_timer module, add the custom block to the sidebar region, and clear drupal cache.

ddev site-install p1

Build the module frontend and export compiled React app to the dist folder

ddev build-timer-block

Run all Frontend tests for the React Timer app

ddev test-timer-block