> For the complete documentation index, see [llms.txt](https://mariohernandez.gitbook.io/components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mariohernandez.gitbook.io/components/a-components-lifecycle/drupal-prep.md).

# Drupal prep

Before we can dive into building our component's infrastructure in Drupal, we need to get a few things ready. Perform each of the tasks below:

## Exercise: Enable the new theme

Enabling our new theme is not required to build Drupal's back-end for the Hero, but it's something we need to do at some point. Let's do it now:

1. From Drupal's Admin Toolbar click **Appearance**
2. Scroll to the **Uninstalled themes** section where you will find the new theme you created. It should have a thumbnail image with the Mediacurrent logo
3. Click **Install and set as default** under the theme name

## Exercise: Disable CSS/JavaScript Aggregation

For some reason, Drupal core comes with CSS and Javascript Aggregation turned on out of the box. Although this is highly recommended on production websites, during development it is recommended we turn aggregation off. This will ensure CSS and Javascript code we write will be instantly available on our drupal pages without having to continuously clearn Drupal caches.

1. From Drupal's Admin toolbar click **Configuration > Development > Performance**
2. Clear both check boxes: **Aggregate CSS files** & **Aggregate JavaScript files**
3. Click the **Save configuration** button
4. While you're at it, click the **Clear all caches** button on the same page

## Exercise: Enable modules

If you haven't already, enable the following modules:

* [Components Libraries](https://www.drupal.org/project/components)
* [Paragraphs](https://www.drupal.org/project/paragraphs) (depends on [Entity Reference Revisions](https://www.drupal.org/project/entity_reference_revisions))
* [Devel](https://www.drupal.org/project/devel)
* [Admin toolbar](https://www.drupal.org/project/admin_toolbar) & Admin Toolbar Extra Tools
* [Twig Field Value](https://www.drupal.org/project/twig_field_value)
* [Focal Point](https://www.drupal.org/project/focal_point) (depends on [Crop API](https://www.drupal.org/project/crop))
* [Views Reference Field](https://www.drupal.org/project/viewsreference)
* Responsive Images (core)
* Media & Media Library (both on core)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://mariohernandez.gitbook.io/components/a-components-lifecycle/drupal-prep.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.