Multi-frontend

Thanks to the component-oriented decoupling of Lupus Decoupled Drupal, it's really easy to connect a frontend of choice!

Supported frontend frameworks

Lupus Decoupled provides supports for the following frontend frameworks:

Example frontends

• Nuxt Naked Starter
• Nuxt Shadcn Example
• Next.js Example
• Nuxt 2 Example (legacy)

Adding a new frontend framework

Adding a support for a new framework is quite easy. Here is a short overview of what the frontend needs to take care of:

• Proxying requests: The frontend typically proxies requests to the Drupal /ce-api endpoint, while preserving the request URI and optionally some request headers. That way, a request to /news is served by the frontend, which requests the backend API at /ce-api/news and takes care of rendering the response.
• Forwarding headers: By forwarding the cookie header, the frontend may easily leverage Drupal authentication handling.
• Rendering page content: The content section of a response contains a nested tree of custom elements that need to be rendered on the page.
• Render a page shell: Request navigation menus and render them as part of a site layout.
• Support page attributes: Support all page attributes provided by the Drupal page API, i.e. render breadcrumbs and messages, support Metatags and Local tasks.
• Handle errors: Take care to not add special handling for HTTP 4xx responses, such that Drupal-controlled error pages get rendered as usual. Simply take care of forwarding the status code.
• Handle redirects: When the page-API generates a redirect response instead of a page, take care to issue a suitable redirect response with the given status code instead of rendering a page.
• Canvas support (optional): To support Drupal Canvas, two additional pieces are needed:
  • Custom Elements preview provider: Implement a preview provider plugin so the Canvas editor can render live component previews via an iframe. The provider receives a component name and props and renders the component in isolation. See the Nuxt preview provider plugin as a reference implementation.
  • Component index: Expose a component-index.json endpoint listing available components, their props, and metadata. Canvas External JS Components (a Canvas extension for integrating external JavaScript components) reads this index to populate the Canvas editor UI. See the nuxt-component-preview component index and fullfatthings/drupal-canvas-react for Vue and React reference implementations.

That's it!