Providing Themes with JavaScript Rendering

Overview

Lupus CSR (Client-Side Rendering) themes allow you to bundle a pre-built frontend application directly as a Drupal theme, so no separate frontend server is needed. Drupal serves the frontend's index.html for all frontend routes; the frontend loads in the browser and fetches content from the CE API at /ce-api/... on the same origin.

This approach is ideal for:

• Drupal CMS site templates where no separate frontend infrastructure is desired
• Getting started quickly without setting up a Node.js server
• Simple projects where SEO is not a primary concern

Note that client-side rendering means content is rendered in the browser via JavaScript. Search engines may not fully index CSR content. For production sites where SEO matters, use server-side rendering instead.

Lupus Client-Side Rendering (Lupus CSR)

Lupus CSR is the Drupal base theme that enables this pattern. It intercepts Drupal's normal HTML output and delivers the frontend's index.html instead. Because the frontend communicates with /ce-api/... on the same origin, CORS configuration is not needed and Drupal authentication works out of the box.

Install it via Composer:

composer require drupal/lupus_csr

Using Lupus CSR Directly

The simplest approach: enable Lupus CSR as your active theme and configure it through the theme settings form at /admin/appearance/settings/lupus_csr. Set a separate admin theme (e.g. Claro) to keep the Drupal backend accessible.

The frontend redirect in Lupus Decoupled settings is not needed with theme-based rendering and can stay disabled.

Creating a Sub-Theme

For distributable or project-specific setups, create a sub-theme of lupus_csr and include your frontend build output in a dist/ directory. The lupus_csr module includes an example Nuxt starter in its examples/ directory. Refer to the Lupus CSR sub-theme guide for configuration details.

Canvas Integration

If the theme's preview provider supports it, components are automatically registered with Canvas ExtJS when the theme is installed. The component index is read from the theme's bundled build output.