Remix (Deprecated)

This guideline covers the basic integration to set up a Remix project as the decoupled frontend framework for a Drupal CMS that uses GraphQL.

Caution

This starter is deprecated. We recommend using the react-router starter instead.

Requirements

• A Drupal set up for Decoupled connection using GraphQL, following the recipe installation guide with the drupal-decoupled-graphql-basic-recipe will give you all the necessary configuration:
  • The GraphQL Compose module installed and configured.
  • The simple OAuth module installed and configured.
  • The Article content type.
  • The Graphql Compose Metatags module installed and configured.
• Have Node.js installed on your machine. We recommend using the latest LTS version.

Next, we need to set up a Remix app. You can follow the Remix to do so. But in short, you can run the following command to create a new Remix app:

npm

npx create-remix@latest remix-drupal

Then, follow the instructions to set up your Remix app.

Install dependencies

After going through the Remix setup moves to the root of the project:

cd remix-drupal

And let’s add some dependencies needed to interact with Drupal GraphQL endpoint.

npm

npm install urql graphql drupal-auth-client drupal-remix

• urql: A GraphQL client that will handle the connection to the Drupal GraphQL endpoint.
• graphql: The GraphQL library that will help us to write the queries.
• drupal-auth-client: A utility that will help us to authenticate with the Drupal GraphQL endpoint.
• drupal-remix: A list of utilities to help you integrate your Drupal site with Remix.

Scaffold the Remix app

We will scaffold the Remix app using the Drupal Decoupled scaffold package. Run the following command:

npm

npm create @octahedroid/drupal-decoupled@latest -- --frontend remix

This will add the necessary files to connect to your Drupal Decoupled instance. It includes the following files:

• app/utils/client.server.ts: A utility that handles the connection to the Drupal GraphQL.
• app/utils/calculate-path.server.ts: A utility that formats the path to the Drupal content to add preview tokens.
• app/routes/$.tsx: A splat route that handles the rendering of the Drupal content.
• .env.example: An example of the environment variables needed to connect to the Drupal project.
• .env: Also will copy the .env.example file to .env file.

And will update the following files:

• app/tailwind.css: Added base styles for reset some tailwind default styles.
• app/routes/_index.ts: Updated the index file to render the home page from Drupal.
• .gitignore: Added the .env file to the gitignore file.