### Basic installation 1. Install `django_components` into your environment: ```bash pip install django_components ``` 2. Load `django_components` into Django by adding it into `INSTALLED_APPS` in your settings file: ```python # app/settings.py INSTALLED_APPS = [ ..., 'django_components', ] ``` 3. `BASE_DIR` setting is required. Ensure that it is defined: ```python # app/settings.py from pathlib import Path BASE_DIR = Path(__file__).resolve().parent.parent ``` 4. Next, modify `TEMPLATES` section of `settings.py` as follows: - _Remove `'APP_DIRS': True,`_ - NOTE: Instead of `APP_DIRS: True`, we will use [`django.template.loaders.app_directories.Loader`](https://docs.djangoproject.com/en/5.2/ref/templates/api/#django.template.loaders.app_directories.Loader), which has the same effect. - Add `loaders` to `OPTIONS` list and set it to following value: This allows Django to load component HTML files as Django templates. ```python TEMPLATES = [ { ..., 'OPTIONS': { ..., 'loaders':[( 'django.template.loaders.cached.Loader', [ # Default Django loader 'django.template.loaders.filesystem.Loader', # Including this is the same as APP_DIRS=True 'django.template.loaders.app_directories.Loader', # Components loader 'django_components.template_loader.Loader', ] )], }, }, ] ``` 5. Add django-component's URL paths to your `urlpatterns`: Django components already prefixes all URLs with `components/`. So when you are adding the URLs to `urlpatterns`, you can use an empty string as the first argument: ```python from django.urls import include, path urlpatterns = [ ... path("", include("django_components.urls")), ] ``` ## Adding support for JS and CSS If you want to use JS or CSS with components, you will need to: 1. Add `"django_components.finders.ComponentsFileSystemFinder"` to `STATICFILES_FINDERS` in your settings file. This allows Django to serve component JS and CSS as static files. ```python STATICFILES_FINDERS = [ # Default finders "django.contrib.staticfiles.finders.FileSystemFinder", "django.contrib.staticfiles.finders.AppDirectoriesFinder", # Django components "django_components.finders.ComponentsFileSystemFinder", ] ``` 2. _Optional._ If you want to change where the JS and CSS is rendered, use [`{% component_js_dependencies %}`](../reference/template_tags.md#component_css_dependencies) and [`{% component_css_dependencies %}`](../reference/template_tags.md#component_js_dependencies). By default, the JS `