Implementing Content Previews with Drupal and Remix

By
Discover the power of Drupal-Remix integration with dynamic inline previews for unpublished content.

In our journey to migrate our Company site to Remix, we stumbled upon a game-changer: inline preview capabilities. Imagine seeing unpublished content come to life right in your editing interface. 

In this blog post, we're thrilled to share how we successfully configured our Drupal site and harnessed the power of Cloudflare Pages to make this transformation a reality.

Drupal Roles and Permissions

To accomplish this task, two new roles were created, "Viewer" and "Previewer."

Both roles contain default permissions; the only new permission added was the "GraphQL Compose - Server: Execute arbitrary requests" to allow both roles to execute GraphQL queries to Drupal from the Remix site.

GraphQL Compose

View Unpublished

This module allows you to grant access for specific user roles to view unpublished nodes of a specific type.

The "View any unpublished content" permission has been added to the "Previewer" role for this particular exercise. This role will be used to fetch data from Remix to Drupal.

View Unpublished

Simple OAuth (OAuth2) & OpenID Connect

This module has been used to configure Drupal as an OAuth 2 authentication provider. In addition, this module allows our Remix website to access Drupal's data by acting like a logged-in user and validating roles and permissions to access data.

We created two Consumers and assigned the proper role of "Viewer" & "Previewer" to each one. 
 

Client ID

Cloudflare

Cloudflare platform provides support for project environment variables to build your site and provides custom environment variables:

The values used on each one are the same; the only difference is "DRUPAL_CLIENT_ID" and "DRUPAL_CLIENT_SECRET," which are the values related to the Consumer created in the previous step.

Production: Consumer" Viewer." 
Preview: Consumer "Previewer."

Preview and viewer consumer

Workflow

For deployment in the "Preview" environment, new code should be committed to a branch named "preview," Cloudflare will deploy the site automatically.

Remix Drupal Module

This module provided the Drupal-Remix integration as the inline preview capabilities to the editing interface.

Remix Setting

Remix Application

What does the final result look like?

Unpublished
Preview unpublished

Wrapping up

As we wrap up our exploration to Remix and implementing dynamic inline previews, we now easily navigate unpublished content and validate roles and permissions. By configuring Drupal roles, leveraging the Simple OAuth module, and harnessing the capabilities of Cloudflare Pages, we have elevated our workflow to new heights. In addition, the Remix Drupal Module has been the key to seamlessly integrating Drupal with Remix, providing an unparalleled editing interface experience.  
 

Are you considering upgrading your Drupal site to a Decoupled implementation? Let's talk about your project! 

Simplifying Redirects: Moving from Drupal to a Headless Site

By

In this blog post, we discover how we tackled the challenge of redirecting users during the migration from Drupal to a headless setup. Learn how we harnessed the power of Cloudflare’s KV Workers, Netlify, and Drupal to ensure a smooth migration process.

Take your project to the next level!

Let us bring innovation and success to your project with the latest technologies.