How to prepare development settings and configurations for Drupal development

Here we are discussing about how we can set up our local development system for fast development using Drupal. This configurations are applicable for both version 8 and 9.

we can classify steps  as below.

• Configurations in settings.local.php
• Configurations in development.services.yml for enabling debug and  for disable cache
• Debug using kint
• Setting up Drush in Development system

Configurations in settings.local.php

From sites folder copy example.settings.local.php and place it in /site/default folder.

C:\xampp\htdocs\drupal9\sites\example.settings.local.php -> C:\xampp\htdocs\drupal9\sites\default

Rename file to settings.local.php

In file default/settings.php you can see  below code

 if (file_exists($app_root . '/' . $site_path . '/settings.local.php')) {
   include $app_root . '/' . $site_path . '/settings.local.php';
 }

By default this is disabled. Enable this one.

* Typical uses of settings.local.php include:

* – Disabling caching.

* – Disabling JavaScript/CSS compression.

* – Rerouting outgoing emails.

Avoid clearing cache for all updates in CSS and java script.

To enable css and js aggregation make below lines to true in settings.local.php

$config[‘system.performance’][‘css’][‘preprocess’] = TRUE;

$config[‘system.performance’][‘js’][‘preprocess’] = TRUE;

To disable cache render, uncomment below code in the settings.local.php

$settings[‘cache’][‘bins’][‘render’] = ‘cache.backend.null’;

To disable dynamic page cache, uncomment below code in the settings.local.php

$settings[‘cache’][‘bins’][‘dynamic_page_cache’] = ‘cache.backend.null’;

To disable internal page cache, in the settings.local.php, uncomment this below code:

$settings[‘cache’][‘bins’][‘page’] = ‘cache.backend.null’;

This file can be used to override variables on secondary (staging, * development, etc.) installations of this site.

Configurations in development.services.yml for enabling debug and  for disable cache

Copy content of   /sites/default/default.services.yml in to /sites/development.services.yml

Open this file and change the values under twig.config . this will disable twig cache.

twig.config:

debug: true

cache: false

auto_reload: true

Login to admin and clear the cache.

Now refresh the page and right click inspect element in Chrome web browser you can see twig debug section in html.

This will provide information about from which templates page is rendering.

Debug using kint

In older Drupal 8 versions Drupal kint module was available with Devel. Now in latest Drupal 8 and Drupal 9 versions, after installing Devel module, we need to enable kint library.

First install Devel using below composer command

$ composer require drupal/devel

Install kint as s dependency  using below command

$ composer require kint-php/kint

After enabling Devel module, click on Devel settings as shown below.`

Select kint as variable dumper option.

Clear the cache and see for each node you can see Devel tab where you can see all details of the variables and properties rendered.

Please note in Drupal 8 older versions you have to  enable Drupal Kint module. You have to use below function to print variables in templates.

{{  kint(content) }}

Setting up Drush in Development system.

During development , major chunk of time we have to spend on clearing Drupal cache. This will be time consuming when we are doing through browser. In order to reduce this time you can install Drush in your development system and use drush command for clearing cache.Below provided steps followed in windows system.

Install composer and run below composer statement to install drush

composer global require drush/drush:10.*

here I am installing Drush version 10 , because Drupal 9 supports only drush 10.

You can install Drush  7 and 8 versions as provided below.

composer global require drush/drush:7.*

composer global require drush/drush:8.*

You can see Drush compatibility with Drupal versions here https://www.drush.org/latest/install/#drupal-compatibility

Next add drush command to system path so that you can use drush command from anywhere in the system.

See below steps in windows in order to add drush to system path.

• Open the Control Panel
• Click “System”
• Click “Advanced system settings”
• Click “Environment Variables”

• In the “User variables” section click “New”
• Variable name: “Path”
• Variable value: “C:/Users/Modules/AppData/Roaming/Composer/vendor/drush/drush” (Replace “Modules” with your user name)
• Click “OK”

Now during development,  clearing Drupal cache will be very easy by executing any one of the below command from command line.

drush cache-rebuild

or

drush cr

or

drush rebuild