PHPackages                             drupalninja/drupalx-decoupled - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Framework](/categories/framework)
4. /
5. drupalninja/drupalx-decoupled

ActiveProject[Framework](/categories/framework)

drupalninja/drupalx-decoupled
=============================

Enterprise template for decoupled Drupal projects.

11.x-dev(9mo ago)232364[1 issues](https://github.com/nextagencyio/drupalx-decoupled/issues)GPL-2.0-or-laterTypeScriptCI passing

Since Sep 4Pushed 5mo ago4 watchersCompare

[ Source](https://github.com/nextagencyio/drupalx-decoupled)[ Packagist](https://packagist.org/packages/drupalninja/drupalx-decoupled)[ RSS](/packages/drupalninja-drupalx-decoupled/feed)WikiDiscussions 11.x Synced 3w ago

READMEChangelogDependencies (23)Versions (15)Used By (0)

DrupalX Decoupled Starter
=========================

[](#drupalx-decoupled-starter)

[![CI](https://github.com/drupalninja/drupalx-decoupled/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/drupalninja/drupalx-decoupled/actions/workflows/ci.yml)[![License: GPL v2](https://camo.githubusercontent.com/6b639abd353f330706524560924b761ba87ba1895911daf38f4b71b9347bb94f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d47504c5f76322d626c75652e737667)](https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html)

A modern, enterprise-ready **Drupal 11** decoupled project template featuring GraphQL API, Next.js frontend, and a comprehensive component library. Built with recipes, Storybook, and TypeScript for rapid development and deployment.

Features
--------

[](#features)

### Backend (Drupal 11)

[](#backend-drupal-11)

- **GraphQL API** - Fully configured GraphQL server with compose fragments
- **Recipe System** - Modular configuration using Drupal recipes
- **Content Types** - Pre-configured Article, Page, and Landing page types
- **Paragraph Components** - 15+ reusable paragraph components (Hero, Cards, Carousel, etc.)
- **Media Management** - Image, SVG, and video media types with responsive image styles
- **Preview System** - Live preview with decoupled iframe integration
- **OAuth Authentication** - Simple OAuth for secure API access

### Frontend (Next.js 15)

[](#frontend-nextjs-15)

- **TypeScript** - Full TypeScript support with type safety
- **Tailwind CSS** - Utility-first CSS framework with custom components
- **Radix UI** - Accessible component primitives
- **Storybook** - Component library documentation and testing
- **Cypress** - End-to-end testing framework
- **GraphQL Client** - Fully typed GraphQL queries and mutations
- **Component Library** - 25+ pre-built React components
- **Responsive Design** - Mobile-first responsive layouts

### Development Environment

[](#development-environment)

- **DDEV** - Containerized development environment
- **Multiple Recipes** - Demo, Government, University, and Nonprofit content
- **Hot Reload** - Development server with live reload
- **Code Quality** - ESLint, Prettier, and TypeScript checking

Requirements
------------

[](#requirements)

- **PHP 8.3** or higher
- **Node.js 20+** (managed via nvm)
- **Composer 2.x**
- **DDEV** (recommended) or Docker
- **Git**

Installation
------------

[](#installation)

### 1. Create your project

[](#1-create-your-project)

```
composer create-project drupalninja/drupalx-decoupled:11.x-dev drupalx-decoupled-starter --no-interaction
cd drupalx-decoupled-starter
```

### 2. Set up permissions

[](#2-set-up-permissions)

```
chmod -R 755 web/sites/default/files/
```

### 3. Configure DDEV

[](#3-configure-ddev)

```
ddev config
```

### 4. Install Drupal with recipes

[](#4-install-drupal-with-recipes)

```
ddev install
```

This command will:

- Start DDEV containers
- Install Composer dependencies
- Install Drupal with minimal profile
- Apply DrupalX GraphQL and Core recipes
- Configure OAuth consumer keys
- Generate admin login link

### 5. Set up Next.js frontend

[](#5-set-up-nextjs-frontend)

In a new terminal tab:

```
cd nextjs
nvm install  # Installs Node.js 20+
npm install
npm run dev  # Starts development server on port 8080
```

### 6. Access your sites

[](#6-access-your-sites)

- **Drupal Admin**: Use the login link generated by `ddev install`
- **Next.js Frontend**:
- **GraphQL Explorer**:

Development Workflow
--------------------

[](#development-workflow)

### Available Recipes

[](#available-recipes)

The project includes several content recipes you can apply:

```
# Demo content (default)
ddev drush recipe ../recipes/drupalx-demo

# Government site content
ddev drush recipe ../recipes/drupalx-gov

# University site content
ddev drush recipe ../recipes/drupalx-university

# Nonprofit site content
ddev drush recipe ../recipes/drupalx-nonprofit
```

### Common Commands

[](#common-commands)

**Backend (Drupal):**

```
# Start/stop DDEV
ddev start
ddev stop

# Database operations
ddev drush sql:dump > backup.sql
ddev drush sql:drop -y && ddev drush sql:cli