Drupal 8 Theming - Part 02 - Disable Cache, Enable Twig Debug

hello this is even for watch and learn comm and in this episode I was planning to do golf jazz live reload sass minification of JavaScript and so on for Drupal 8 but I'm not going to do that instead we are going to learn how to enable tweak debugging and how to disable Drupal cache why we need to do that first you will see in just a second this is the site we created in our previous episodes and as a kill as you can see we have some content on on here but that's weird because if we go to our team in themes custom and demian we will see that we have only dot info dot yml file and that libraries dot yml file so where does this content right here come from so in Drupal when you create your theme and something is supposed to display on your site and you don't have a template for that the Drupal will default to its core templates and that templates can be found in core then you go to modules then you go to system just the second system and then you go to templates so this page right here is actually displayed from the file called page dot HTML that week so if we want to use this file in our theme we of course won't edit it right here oh we can just copy it now not copy name just copy the file I will close all of this and paste it in my endymion theme okay so we have page dot html' dat wig right here we will talk about twig in future episodes for now you just need to know that wig is a templating language that Drupal uses to display information on your pages on your templates when your categories taxonomies and so on so this is the page dot HTML tweak and as you can see this is the content that is displayed right here so this the template tag actual twig tag page that content is all of this right here welcome to Drupal theming and so on and if I go right here and add something to it let's say hello okay and save this if i refresh this page you will see that nothing has happened there is no hello right here so I'm going to go to configuration and performance and clear cache with just a second and now I'm going to go to open a new tab with my site on it as and as you can see the hello is right here okay so we clear the cache the hello appeared so let's say we want to add something else else to this page hello there okay if I save this now and refresh the page you will see that again we just have hello so we have to go right here again and clear all caches we did clearing the caches very much in the previous episodes so if i refresh this now we get hello there okay so as you can see this is not the best way to make your themes so whenever you make a change to the template file you have to clear the cache and so on and this is not the way we want to work we want to make some changes to our template and want those changes to be immediately visible on our site so right now we are going to learn how to disable Twigg cache and all of the Drupal cache so that we can easily work with our themes so to disable cache and to enable a tweak debugging I will talk about weak debugging a little bit later but we will see it how it works right here the process is not actually very intuitive so I spent about two or three hours scouring the internet to find the best solution on how to do this so what we're going to do now is we're going to go to our sites folder and we'll see that we have this example dot settings that local dot PHP file right here if we open it up you can see you have some instructions right here but they're not very there they're a little bit confusing I don't know what this site example.com means so what if your site is on localhost / da teaming what would you put in there I don't know so the solution to this is is I'm going to go to my file manager forklifted is a great file manager and I'm going to go to sides and I'm going to copy this example dot settings that local dot PHP file to the default folder I'm going to copy it and as you can see this is protected folder so you have to add your password ok and now I'm going to rename it and I'm going to rename it to be just settings that local dot PHP so we want to have some local settings for our Drupal so let's say these are going to be development settings as we are developing a theme of course you will turn all of this off once your site goes live ok so now that we did that we can go to default and settings that local dot PHP and in this file I'm going to first of all just make this text a little bit bigger so you can see better we are going to find first of all this line as you can see it's calling sites development that services that were male ok we have that file right here so it's in the site's folder but what we want to do actually is the same the cash so I'm going to go right here and uncomment this settings cash bins renderer equals cash that back and done dot now and I'm going to save this and right now if I go to my site nothing should happen actually because we first have to go to Settings dot PHP file right here and go to the end of that file so I have to pause the video right here because if I go down even more you will see my database settings and passwords and so on and I don't want you to see that but what we want to do right here so at the end of this file we will uncomment these three lines so these three lines are actually calling this settings that lock local dot PHP file that we set up right here so I'm going to save this let's say overwrite okay and if I go to my site now new refresh it you will see this error so I had a lot of problems with this error and this error is happening I don't actually know why it's happening because if we go to settings that local you will see that it's calling this file right here and we have that file actually it's is this one so it's calling this cash back and now and so on and it shouldn't be this this unexpected error please try again you have requests non-existent service so to fix that it will be very nice for Drupal guys to add this right here but to fix that is actually you just go rebuild dot PHP so good da teaming dev or whatever it is for you so localhost the a teaming or something like that slash rebuild that HP and press Enter so to rebuild this site configuration okay and right now as you can see our site works fine so the next thing we want to do is we wanna if we go to let me just see right here default services you can see that we have some services for twig so twig gothic and we have debug set to false outer reload set to null so how to reload automatically recompensed with templates whenever the source cause changes if you don't provide the values for it okay so and you have this cash set to true so we have to disable cash enable outer reload and debug set to to true if you did just if you did that in this file it wouldn't work but as I've found out before when I did research for this video you can actually just rename default dot services to services dot yml and then it would work but I don't want to do that I want to set up a local development environment for Drupal so what we're going to actually do is going to we are going to go to this development that services dot yml file and then we're just going to do so pretty much copy this so we have parameters so we're going to go to this file so development that services dot yml it's inside folder and we're going to do parameters so I hope I spelled this correctly parameter is okay then we're going to do tweak coffee twig that config okay and then remember this is one male file so indentation is important and then we're going to go right here services so just to see what these configs are called so debug we're going to do the bug and set it to true okay and then we have outer reload and set that to true also okay and then we have what is the last one called cash so we definitely have to set that to false false okay save this and now if we go to our site refresh it open up our console and as you can see nothing actually happened right here so we have to clear the cache one more time so let's clear the cache okay and refresh this page and as you can as you can see now the tweak the bargain is working we are going to do a lot of things with this tweak debug set to true but one way we can tell that it's working is if we check out our console right here you can see we have some helpful information about this template file so this steam debug team hook it gives us file name suggestions it gives us file name suggestions for some outputs right here it shows you what template it's currently calling for this tool bar administration store its course templates table templates navigation toolbar and so on so it gives us a lot of helpful information to do our theming of course when the site goes live we want to turn that off so the twig debugging is working let's see if the cache works right now so we have this hello there in our page dot HTML dot twig so I'm going to remove this right here save it and refresh the page and as you can see hello there is not here anymore so we didn't have to clear the cache for this changes to take effect if we write something else right here save it refresh it and we see we get this SAF and so on so this is the way you can turn on twig debugging and turn off cache for Drupal so that you can develop your theme like you're supposed also one more thing if you don't want to follow all of this but I think this is the best and this is the Drupal way to do it so you want to separate your development environment for from your actual live environment you can just go to default dot services that were ml and rename this to default to services dot yml because one of the reasons that you should remain rename this file for this to work it's in settings that PHP if we go somewhere at the bottom you will see that it's actually calling that file so I don't know why that is let me just find that right here at the end somewhere ok so you see settings containers the ml's services dot yml it's calling this instead of this default dot services dot yml so this is the reason if you change this twig config right here it just won't work ok so that's it for enabling tweak debugging and disabling cache in the next episode we are going to set up our golf just says live reload javascript minification and so on i hope you guys like this video if you did please like it or you can even subscribe to my channel it's going to be a lot of Drupal 8 theming videos for this series also you can follow me on Twitter or on Facebook I will keep you up to date with the latest of my videos and also some of the stuff I find on the Internet and that's it for this episode I'll see you in the next one

Channel: Watch and Learn

Views: 80,901

Rating: 4.9717317 out of 5

Keywords: drupal 8, theming, drupal 8 theming, disable cache, enable twig debug, twig debug, tutorial, website, web site, drupal cache

Id: rRsOxSuJ4OU

Length: 16min 28sec (988 seconds)

Published: Tue Nov 17 2015