Local development set up for theming

Submitted by Nicolabell on Tue, 10/29/2019 - 20:07

Based on info from https://drupalize.me/tutorial/configure-your-environment-theme-development?p=2512



Disable render caching and JavaScript/CSS aggregation



  1. It is best to do this in the settings.php file by enabling the settings.local.php file - uncomment this line and place it at the bottom of the file for easy:



if (file_exists(__DIR__ . '/settings.local.php')) {

  include __DIR__ . '/settings.local.php';




  1. Then you will need to make sure there is a settings.local.php file in the default folder.  You can copy one over from the sites folder.

  2. Clear cache so the settings take hold

  3. Within this settings.local.php file you can also enable the development.services.yml file

  4. Uncomment lines in settings.local.php to disable css and js aggregation features:


$config['system.performance']['css']['preprocess'] = FALSE;

$config['system.performance']['js']['preprocess'] = FALSE;

  1. Also uncomment this line to bypass the Render API cache:

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

Top tip: 

“In the UI the checkboxes to enable CSS and JavaScript aggregation remain checked, even if you have turned these values off in sites/default/settings.local.php. So how do you know if your development settings are working? View source on your site's home page and if you see a long list of CSS files with recognizable names, aggregation is turned off. If you only see a few CSS files with filenames consisting of a bunch of random characters, then aggregation is on. Same goes for JavaScript files.”


Turn on Twig debugging



This is done by editing the twig.config settings in services.yml, but in this case we are configuring for local development, so will be adding the settings to the development.services.yml.



1 . Add the twig.config configuration indented under the parameters: line. Ensure that your code additions are appropriately indented with 2 spaces, not the tab character (or an error will result).




    debug: true

    auto_reload: true

    cache: false


2. Clear caches



3. Check that twig is working by looking at the page source to see the twig suggestions etc


Top tip: I found it really hard to get debugging to work in my browser, so in the end a quick but not advisable fix is to turn it on in core/core.services.yml (but change this back for live)







Looking at twig template files is supposedly memory intensive so amending this file is also useful.







memory_limit = 128M

max_execution_time = 60

error_reporting = E_ALL

display_errors = TRUE

display_startup_errors = TRUE

html_errors = 1


More info about this: https://www.drupal.org/docs/7/managing-site-performance-and-scalability/changing-php-memory-limits


Also add some debugging tools, TBC.





Add to useful block