WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.146 --> 00:00:06.296 align:middle Unless you're building a pure API - and we will talk about returning JSON later 00:00:06.296 --> 00:00:08.986 align:middle in this tutorial - you're going to need to write some HTML. 00:00:09.806 --> 00:00:14.826 align:middle And... putting text or HTML in a controller like this is... 00:00:14.826 --> 00:00:17.016 align:middle ugly. No worries! 00:00:17.246 --> 00:00:22.906 align:middle Symfony has great integration with an incredible template library called Twig. 00:00:23.566 --> 00:00:30.076 align:middle There's just one problem: our Symfony app is so small that Twig isn't even installed yet! 00:00:30.746 --> 00:00:33.506 align:middle Ah, but that's not really a problem... 00:00:33.746 --> 00:00:35.356 align:middle thanks to the recipe system. 00:00:35.356 --> 00:00:39.506 align:middle Head back to https://flex.symfony.com and search for "template". 00:00:40.246 --> 00:00:40.856 align:middle There it is! 00:00:41.376 --> 00:00:46.806 align:middle Apparently Symfony's recommended "template" library is something called twig-pack. 00:00:47.946 --> 00:00:48.796 align:middle Let's install it! 00:00:49.536 --> 00:00:55.926 align:middle composer require template This installs a few packages... 00:00:56.906 --> 00:00:59.596 align:middle and yea! 2 recipes! 00:01:00.676 --> 00:01:04.646 align:middle Let's see what they did: git status Whoa, awesome. 00:01:05.116 --> 00:01:11.126 align:middle Okay: we expected changes to composer.json, composer.lock and symfony.lock. 00:01:11.666 --> 00:01:14.616 align:middle Everything else was done by those recipes. 00:01:15.366 --> 00:01:17.246 align:middle Let's look at bundles.php first: 00:01:17.856 --> 00:01:24.936 align:middle git diff config/bundles.php Interesting: it added two lines. 00:01:25.566 --> 00:01:30.516 align:middle Go open that: config/bundles.php. 00:01:30.516 --> 00:01:33.256 align:middle A "bundle" is a Symfony plugin. 00:01:34.066 --> 00:01:39.446 align:middle Pretty commonly, when you want to add a new feature to your app, you'll install a bundle. 00:01:39.996 --> 00:01:45.276 align:middle And when you install a bundle, you need to enable it in your application. 00:01:45.426 --> 00:01:48.506 align:middle A long time ago, doing this was manual. 00:01:48.926 --> 00:01:52.656 align:middle But thanks to Symfony Flex, whenever you install a Symfony bundle, 00:01:52.896 --> 00:01:56.396 align:middle it automatically updates this to enable it for you. 00:01:57.086 --> 00:01:59.976 align:middle So... now that we've talked about this file, 00:02:00.376 --> 00:02:03.356 align:middle you'll probably never need to think about it again. 00:02:04.036 --> 00:02:06.886 align:middle The recipe also added a templates/ directory. 00:02:07.456 --> 00:02:11.826 align:middle So if you were wondering where your templates are supposed to live... 00:02:12.046 --> 00:02:14.306 align:middle the recipe kinda answered that question! 00:02:15.246 --> 00:02:19.786 align:middle It also added a base.html.twig layout file that we'll talk about soon. 00:02:20.666 --> 00:02:24.676 align:middle So... apparently our templates are supposed to live in templates/. 00:02:25.056 --> 00:02:31.856 align:middle But why? I mean, is that path hardcoded deep in some core Twig file? 00:02:32.516 --> 00:02:40.026 align:middle Nope! It lives right in our code, thanks to a twig.yaml file that was created by the recipe. 00:02:40.616 --> 00:02:43.396 align:middle Let's check that out: config/packages/twig.yaml. 00:02:44.266 --> 00:02:47.846 align:middle We're going to talk more about these YAML files in another tutorial. 00:02:48.436 --> 00:02:51.266 align:middle But without understanding a lot about this file, it... 00:02:51.446 --> 00:02:53.026 align:middle already makes sense! 00:02:53.876 --> 00:02:57.746 align:middle This default_path config points to the templates/ directory. 00:02:58.276 --> 00:03:00.216 align:middle Want your templates to live somewhere else? 00:03:00.666 --> 00:03:01.896 align:middle Just change this and... 00:03:02.076 --> 00:03:04.246 align:middle done! You're in control. 00:03:05.406 --> 00:03:10.836 align:middle By the way, don't worry about this weird %kernel.project_dir% syntax. 00:03:11.256 --> 00:03:12.546 align:middle We'll learn about that later. 00:03:13.056 --> 00:03:16.996 align:middle But basically, it's a fancy way to point to the root of our project. 00:03:18.176 --> 00:03:21.396 align:middle The recipe also created one other twig.yaml file 00:03:21.436 --> 00:03:25.916 align:middle which is less important: config/packages/test/twig.yaml. 00:03:26.516 --> 00:03:31.256 align:middle This makes a tiny change to Twig inside your automated tests. 00:03:31.976 --> 00:03:33.566 align:middle The details don't really matter. 00:03:33.876 --> 00:03:39.216 align:middle The point is: we installed Twig and its recipe handled everything else. 00:03:39.826 --> 00:03:43.216 align:middle We are 100% ready to use it in our app. 00:03:43.586 --> 00:03:44.666 align:middle Let's do that next.