New Relic is a monitoring service that provides insights into your application stack from front-end performance to the server and infrastructure metrics. New Relic uses a combination of aggregating server logs, and pre-built (or custom) monitors to track the metrics that are most important to your application. The collected data can be organized into custom dashboards, and alerts can be set up and issued per customizable conditions.

In this tutorial, we'll:

• Learn about different New Relic modules and their purpose
• Review some default dashboard components and reports
• Discuss how to use the information in New Relic to understand the health of your Drupal application

By the end of this tutorial, you should understand the basics of using New Relic and the insights it offers to monitor and improve the performance of your Drupal site.

Performance profiling allows you to see an overview of how your Drupal application stacks up against your users' needs and business requirements. A good profile will help you understand where the performance bottlenecks are and where you should focus your efforts in order to achieve the best results when optimizing your application.

There are many profiling tools available to help you analyze your Drupal site's performance. Some are free -- like the browser’s built-in development tools, the Lighthouse Chrome extension, and XHProf. Some are paid -- like New Relic, Blackfire, and other profiling SaaS solutions.

In this tutorial we'll:

• Outline the general concepts and goals of performance profiling
• List some available profiling tools and their features

By the end of this tutorial you should be able to describe what performance profiling is, and list the tools commonly used to establish a performance profile for a Drupal site.

When your site is experiencing performance issues, one way to pinpoint the cause is to use profiling tools. Before you can fix the issue you have to be able to identify what's causing it. All profiling tools do roughly the same thing: they tell you what code is called during the request and how much time is spent executing it. This helps to identify the slowest code and dig deeper into the cause. Once the cause is determined you can start figuring out how to optimize the code.

For this tutorial, we’ll use New Relic as a profiling tool, but you can apply a similar methodology using the profiling tool of your choice.

In this tutorial, we'll:

• Learn how to identify and analyze slow transactions
• Look at common things to check for while profiling
• Cover some questions you should ask when looking at profiling data to help track down the slow code

By the end of this tutorial, you should know how to profile a Drupal site (specifically with New Relic) to find performance bottlenecks.

No one likes to wait for a slow site to load. Not me, not you, and definitely not search engines. And the effect of site load times on things like SEO, user bounce rates, purchase intent, and overall satisfaction are only going to become more pronounced over time.

Drupal is a modern web framework that is capable of serving millions of users. But every site is unique, and while Drupal tries hard to be fast out of the box, you'll need to develop a performance profile, caching strategy, and scaling plan that are specific to your use case in order to be truly blazing fast.

Drupal site performance depends on multiple components, from hardware setup and caching system configuration to contributed modules, front-end page weight, and CDNs. Experienced Drupal developers looking to optimize their applications know where to start looking for potential savings. They can manipulate settings and combinations of these components to achieve the desired results. Our goal with this set of tutorials is to help explain the process and provide you with the insight that comes with experience.

In this tutorial we'll:

• Introduce high-level performance concepts for Drupal that we'll then cover in more detail elsewhere
• Provide an overview of the main Drupal performance components.

By the end of this tutorial, you should understand what components around your Drupal application are responsible for site performance.

When it's time to start a custom Drupal theme from scratch (especially if you're new to Drupal theming), we recommend using Starterkit. Starterkit helps you get a new theme up and running by scaffolding a set of theme files with sensible defaults, saving you from a bunch of repetitive work.

In this tutorial we'll:

• Learn what Starterkit is
• Discuss when you should--and should not--use Starterkit
• Walk through how to use Starterkit to generate a new Drupal theme

By the end of this tutorial you should be able to explain the use case for Starterkit and understand how to use it to start a new custom theme.

By default, individual forms in Drupal are not output using Twig template files. It's possible to associate a form with a Twig template file by creating a new theme hook, and then referencing that theme hook from the $form array that defines the form. Doing so allows theme developers to customize the layout of the elements in the form using HTML and CSS.

This is useful when you want to change the layout of the entire form. For example, putting the elements into 2 columns. If you want to change individual elements in the form, you can often do so by overriding element specific Twig template files.

In this tutorial, we'll:

• Learn how to create a new theme hook that can be used to theme an element in a render array.
• Associate the $form we want to theme with the new theme hook we created.
• Create a Twig template file for the theme hook that will allow us to lay out the form elements using custom HTML.

By the end of this tutorial, you should be able to associate a Twig template file with any form in Drupal, so that you can customize its layout using HTML and CSS.

There’s no one-size-fits-all path to upgrade from Drupal 10 to Drupal 11, but there is a set of common tasks that everyone will need to complete.

In this tutorial we’ll:

• Explain the differences between Drupal 10 and Drupal 11 that affect the upgrade path.
• Walk through the high-level steps required to upgrade from Drupal 10 to Drupal 11.
• Provide resources to help you create an upgrade checklist and start checking items off the list.

By the end of this tutorial you should be able to:

• Explain the major differences between Drupal 10 and 11.
• Audit your existing Drupal 10 projects for Drupal 11 readiness, and estimate the level of effort involved.
• Start the process of upgrading your site from Drupal 10 to Drupal 11.

In this tutorial, you’ll create and render a simple single directory component (SDC) in Drupal. You’ll set up the required files, call the component from a template, and confirm that Drupal renders it with its styles automatically attached.

By following along, you will:

• Scaffold the files for a basic card component.
• Reference the component in a node template.
• See how Drupal renders the component’s HTML and CSS together.

When you’re done, you’ll have a complete working example of a Drupal single directory component.

The component YAML file, with the suffix .component.yml, is the heart of every Drupal single directory component (SDC). This file describes how consumers can pass data (props) and nest content (slots) into the component. Similar to a PHP interface, the schema defined in a .component.yml file acts as a contract that tells consumers (both developers and low-code tools) what data a component accepts and what shape it expects.

In this tutorial, you’ll learn what each key in a component's YAML file does. You’ll see how the file names the component, describes its API, and helps low-code tools validate and expose your component. Then we’ll create a new card component with a card.component.yml file.

By following along, you will:

• Reinforce your understanding of where a Drupal component's YAML file lives and why it matters.
• Break down each top-level key—$schema, name, description, props, and slots.
• Learn more about what you can put into a .component.yml file.

By the end of this tutorial, you’ll have a discoverable card.component.yml file for a new card SDC and a mental model for how Drupal uses it.

Learn how to embed a Drupal single directory component (SDC) in a Twig template like node.html.twig. This tutorial explains how to pass props and slots to the component, how to determine the correct namespace and name, and how to choose between Twig’s {% include %} and {% embed %} when rendering an SDC. This technique is most often used by theme developers who override templates and compose a page using single directory components. A common scenario is expressing your design system as components in a theme, then overriding templates to use those components.

In this tutorial, we will:

• Reference a component from a parent Twig template file.
• Pass props and slot values to a component from that template.
• Decide when to use {% include %} or {% embed %} based on the component's slot structure.

By the end of this tutorial, you’ll be able to embed a component into a Twig template and pass values to both its props and slots.

As a module developer, you output themed content from your module in the form of renderable arrays. When doing so, you can make use of single directory components (SDCs) by using the #type => 'component' render element type. This allows modules to dynamically select and configure a component based on configuration or specific PHP logic. You'll use this as the return value of a controller, or a configurable plugin related to display building, like custom blocks or field formatters. As an example, we'll author a custom block plugin that loads a specific node and outputs it using the card SDC we defined in a previous tutorial. We'll build a render array that supplies the values for the component's props and slots, and add some caching logic to the output.

In this tutorial, we will:

• Build a render array that targets an SDC via the #component property.
• Pass data into the component's props and slots, and demonstrate optional #propsAlter and #slotsAlter callbacks.
• Validate the output and cache it properly.

By the end of this tutorial, you'll be able to render any SDC via a module's PHP code using a well-structured and cache-friendly render array.

One of the benefits of using Drupal single directory components is that Drupal automatically builds and attaches an asset library whenever it is used. Adding CSS styles and JavaScript interactivity to a single directory component (SDC) is as simple as dropping component-name.css and component-name.js files into the root directory of the component. Drupal detects these files, creates an asset library, and attaches it when the component is rendered. This means when you want to add additional CSS or JavaScript assets, you will override the asset library created for your component instead of defining a new one.

In this tutorial, we will:

• Add component-scoped CSS and JavaScript files.
• Learn how to override a component's existing asset library to add additional assets.
• Discuss how to integrate common front-end asset build tools (Gulp, Webpack, Vite, etc.) while working with Drupal single directory components.

By the end of this tutorial, you'll be able to attach CSS and JavaScript assets to an SDC and validate that they load only when the component is in use.

Drupal single directory components use Twig template files to define their HTML markup and how the values of props and slots are displayed. To discover available props and slots, read the component’s .component.yml file. When working with slots, you’ll often choose between rendering a slot as a Twig block ({% block %}) or interpolating a variable directly ({{ variable }}).

In this tutorial, you’ll:

• Add a card.twig file to an existing component directory.
• Read the associated card.component.yml schema to identify props and slots you can work with.
• Render props and slots wrapped in custom HTML markup.

By the end of this tutorial, you’ll be able to connect a Twig template to any SDC and render the props and slots passed into the component.

A Drupal single directory component (SDC) is Drupal's way of packaging the markup, metadata, styles, and behavior for a UI element in one self-contained folder inside a theme or module. This structure helps front-end developers and site builders keep all related files together for easier theming and reuse. A Drupal single directory component directory must be located in a specific place and its files named with a particular convention so that the system can discover it and use its assets.

In this tutorial, we'll:

• Show where Drupal discovers single directory components in your codebase.
• Explain the naming and organization conventions for Drupal single directory component directories and files.
• Outline key files for a component—both required and optional.

By the end of this tutorial, you'll be able to identify an SDC directory in a Drupal module or theme and know exactly what you're looking at.

Using Vite we can scaffold a stand-alone React application with modern tooling, instant dev-server startup, and hot module replacement. It's a great way to get started with React and works perfectly for decoupled apps that talk to Drupal's JSON:API. After creating the scaffold, we'll port code from previous tutorials to the new structure.

In this tutorial we'll:

• Use Vite to scaffold a new React project
• Refactor existing code into Vite's project structure
• Confirm that our code runs

By the end of this tutorial, you'll know what Vite is and how to get started using it for a decoupled React app.

Props and slots are the two ways that data can be provided to a single directory component (SDC). They are part of a component's schema definition, and are used to determine the names of variables passed to a component's template file. Props pass structured, validated data into a component, while slots allow us to inject flexible content such as HTML or nested components. Understanding when and how to use each ensures you can build reusable and adaptable components.

In this tutorial, we'll:

• Learn what props and slots are, and how they differ.
• Discuss how using one or the other impacts the developer experience and use of your components in a UI.
• Practice deciding when to use each for component design.

By the end of this tutorial, you'll know how to choose between props and slots when building components.

Overriding Single Directory Components (SDCs) allows you to safely customize the functionality and appearance of components provided by contrib modules or themes. Instead of editing the original files, copy a component into your theme, declare that it replaces the original, and then make the necessary adjustments. This approach ensures our changes are upgrade-safe and easy to maintain.

In this tutorial, we will:

• Copy an existing SDC into a theme.
• Use the replaces: key in the component metadata to declare the override.
• Modify the component Twig, CSS, or JavaScript and confirm the changes appear on our site.

By the end of this tutorial, you should be able to override SDCs safely and maintain your customizations in an upgrade-safe manner.

Drupal recipes provide a new way to package and share reusable features across Drupal sites. Unlike traditional install profiles or distributions, recipes are applied once to add functionality and then step out of the way, leaving you with a standard Drupal site that you can customize freely.

In this tutorial, we will:

• Understand what Drupal recipes are and how they differ from install profiles and distributions
• Learn the four core properties that make recipes powerful: applied (not installed), shareable, non-locking, and composable
• Explore real-world scenarios where recipes solve common platform and agency challenges

By the end of this tutorial you'll be able to explain what Drupal recipes are, identify features in your projects that are good candidates for recipes, and articulate the value of recipes to stakeholders.

Recipes transform your Drupal site by adding features and configuration. After downloading (or authoring) a recipe it needs to be applied to your Drupal project. This is analogous to following the step-by-step instructions in a recipe to make a dish. Only, we're not performing the steps on our own, but instead we're using Drupal's tools to apply the recipe. Applying the recipe adds its features to your Drupal project. This requires establishing safe workflows to apply recipes, verify their effects, and roll back changes if needed.

In this tutorial, we will:

• Apply a recipe in a non-production environment using a feature branch workflow.
• Review configuration changes using Git and verify functionality in the UI.
• Understand how to roll back recipe changes if needed.
• Learn safe workflows for both developers and non-developers.

By the end of this tutorial, you'll be able to safely apply recipes to your projects, review their impact, and decide whether to keep or roll back the changes.

The built-in config actions in Drupal core cover most common scenarios. But sometimes you need custom operations specific to your feature or the configuration your module relies on. You can create custom config actions by defining them as plugins or by adding PHP attributes to a configuration entity class's methods. Let's implement a custom config action to toggle an SEO strict mode setting to learn how to extend recipes with domain-specific configuration operations and make them reusable across your projects.

In this tutorial, we will:

• Identify scenarios where custom config actions are warranted.
• Understand the two implementation patterns: plugins and attributed methods.
• Implement a custom config action in a module.

By the end of this tutorial, you'll be able to implement custom config actions that extend the configuration API provided to your recipes, making platform-specific operations reusable and declarative.