Skip to main content

Remix

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

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:

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 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 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/drupal/client.server.ts: A utility that handles the connection to the Drupal GraphQL.
  • app/utils/drupal/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.

Also it will override the app/tailwind.css file to add some default styles.

info

The front end app is now ready to connect to your Drupal CMS. To do so, follow the connect guide.