This React application demonstrates one approach to providing decoupled menus to a decoupled front end. It requires a Drupal site to be installed with a few patches and custom modules. You will find setup instructions below.
The back end requires a couple sandbox modules (which require a couple core patches). The back end also needs to have some default configuration and content set up.
In order to avoid CORS configuration and multiple vhosts, this project can be installed and used as a Drupal theme which simply loads the React SPA for all non-admin pages.
To install the back end, you will need to set up Drupal as a Composer project.
Then, you will need to install Drupal using the standard
profile. Finally,
you will need to create a few test nodes and configure one of them as a front
page.
# First, change directories to where you'd like to install Drupal.
# Second, change the value below to a directory name that you prefer.
export INSTALL_DIR=js_menu_back_end
# Third, copy and paste the remaining commands into your terminal and run them.
# Creates a Drupal project and changes into its directory.
composer create-project --no-install drupal/recommended-project "$INSTALL_DIR"
cd "$INSTALL_DIR"
# Enables automatic patch application.
composer require cweagans/composer-patches:^1.5
composer config extra.enable-patching true
# Makes the required sandbox modules and this project available to composer.
composer config repositories.1 vcs https://git.drupalcode.org/sandbox/gabesullice-3175825.git
composer config repositories.2 vcs https://git.drupalcode.org/sandbox/gabesullice-3175828.git
composer config repositories.3 vcs git@github.com:gabesullice/decoupled-navigation-demo-app.git
# Installs the required modules.
composer require --prefer-source drupal/jsonapi_navigation:1.0.x-dev
composer require --prefer-source drupal/js_menu_demo:1.0.x-dev
# Forces composer to apply the patches required by the sandbox modules.
composer install
Change directories into the web root (cd web
) and run the following command.
php core/scripts/drupal install standard
Take note of the generated username and password.
Finally, you will need to set up an Apache vhost or other server. This is left as an exercise for the reader.
Using the previously noted credentials, visit /user/login
and log in as User
1.
Next, visit /node/add/page
and save a new page node entitled My home page.
Visit /node/add/page
again and create another new page entitled My child
page with a URL alias of your choice. Under menu settings, check Provide a
menu link and set the Parent item to -- Home
. Save the page.
Visit /node/add/article
and save a new article entitled My first article.
Do not choose a URL alias for this node. Under menu settings, check Provide
a menu link and set the Parent item to -- Home
and set the Weight to
1
. Save the article.
Visit /admin/config/system/site-information
and change the default front page
to /node/1
.
Visit /admin/modules
and enable the JSON:API Navigation module and its
dependencies.
Visit /admin/appearance
, find the JS Menu Component Bridge theme and click
Install and set as default. Do not use this theme as an administration theme
and be sure to enable the Use the administration theme when editing or
creating content option.
If you would like to developer this project you will need to build the project.
To do so, install the project's dependencies by changing directories into
themes/contrib/js_menu_demo
and running:
npm install
Next, create a .env.js
file:
make .env.js
To build the project, run:
make
Running make
will run both prettier and webpack, but you can run them
individually with either make prettier
or make pack
.