WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.066 --> 00:00:03.496 align:middle What about images, CSS and JavaScript? 00:00:03.696 --> 00:00:04.766 align:middle How does that work in Symfony? 00:00:05.346 --> 00:00:08.776 align:middle First off, the public/ directory is known as your document root. 00:00:09.276 --> 00:00:12.336 align:middle Anything inside public/ is accessible to your end user. 00:00:12.666 --> 00:00:16.496 align:middle Anything not in public/ is not accessible, which is great! 00:00:16.866 --> 00:00:20.316 align:middle None of our top secret source files can be downloaded by our users. 00:00:20.906 --> 00:00:24.636 align:middle So if you want to create a CSS file or an image file or anything else, 00:00:24.826 --> 00:00:28.036 align:middle life can be as simple as putting it in public/. 00:00:28.506 --> 00:00:30.766 align:middle I can now go to /foo.txt... 00:00:31.026 --> 00:00:32.466 align:middle and we see the file. 00:00:33.116 --> 00:00:37.166 align:middle However, Symfony has a great component called Asset Mapper 00:00:37.296 --> 00:00:39.996 align:middle that lets us effectively do the same thing... 00:00:40.106 --> 00:00:42.266 align:middle but with some important, extra features. 00:00:42.826 --> 00:00:47.306 align:middle We have a few tutorials that go deeper into this topic: one about Asset Mapper specifically 00:00:47.526 --> 00:00:51.146 align:middle and another about building things with Asset Mapper called LAST Stack. 00:00:51.656 --> 00:00:52.996 align:middle Check those out to go deeper. 00:00:53.666 --> 00:00:56.596 align:middle But let's dive into the friendly waters of Asset Mapper! 00:00:56.956 --> 00:01:00.306 align:middle Commit all your changes - I already have - then install it with: 00:01:00.536 --> 00:01:05.826 align:middle composer require symfony/asset-mapper This recipe makes several changes... 00:01:05.826 --> 00:01:09.496 align:middle and we'll walk through each little-by-little as they're important. 00:01:09.896 --> 00:01:14.146 align:middle But already, if we move over and refresh, our background is blue! 00:01:14.626 --> 00:01:17.636 align:middle Inspect Element in your browser and go to the console. 00:01:18.106 --> 00:01:19.686 align:middle We also have a console log! 00:01:20.016 --> 00:01:22.396 align:middle This log comes from assets/app.js. 00:01:22.526 --> 00:01:23.786 align:middle Welcome to asset mapper. 00:01:24.146 --> 00:01:25.286 align:middle Why thank you! 00:01:25.756 --> 00:01:27.826 align:middle Asset Mapper has two big superpowers. 00:01:28.236 --> 00:01:31.366 align:middle The first is that it helps us load CSS and JavaScript. 00:01:31.866 --> 00:01:38.196 align:middle The recipe gave us a new assets/ directory with an app.js file and a styles/app.css file. 00:01:38.716 --> 00:01:41.896 align:middle As we saw, the console log is coming from app.js. 00:01:42.956 --> 00:01:44.636 align:middle So this file is being loaded. 00:01:45.186 --> 00:01:50.136 align:middle It's also apparently including app.css, which is what gives us that blue background. 00:01:50.686 --> 00:01:55.586 align:middle We're going to talk more later about how these files are loaded and how this all works. 00:01:55.876 --> 00:02:01.416 align:middle But for right now, it's enough to know that app.js and app.css are included on the page. 00:02:02.026 --> 00:02:05.666 align:middle The second big superpower of Asset Mapper is a bit simpler. 00:02:06.196 --> 00:02:10.226 align:middle The recipe created a config/packages/asset_mapper.yaml file. 00:02:10.686 --> 00:02:14.866 align:middle There's not a lot here: just paths pointing to our assets/ directory. 00:02:15.426 --> 00:02:18.146 align:middle But because of this line, any file that we put 00:02:18.146 --> 00:02:21.096 align:middle in the assets/ directory becomes available publicly. 00:02:21.616 --> 00:02:25.536 align:middle It's as if the assets/ directory physically lives inside public/. 00:02:26.026 --> 00:02:31.126 align:middle This is useful because, along the way, Asset Mapper adds asset versioning: 00:02:31.516 --> 00:02:33.966 align:middle an important frontend concept that we'll see in a minute. 00:02:34.496 --> 00:02:38.456 align:middle But first, head to your terminal and run another new debug command: 00:02:38.456 --> 00:02:43.936 align:middle php bin/console debug:asset This shows every asset that's exposed publicly 00:02:43.936 --> 00:02:44.906 align:middle through Asset Mapper. 00:02:45.286 --> 00:02:49.196 align:middle Right now it's just two: app.css and app.js. 00:02:49.766 --> 00:02:52.646 align:middle If you download the course code from this page and unzip it, 00:02:52.856 --> 00:02:56.466 align:middle you'll find a tutorial/ directory with an images/ subdirectory. 00:02:57.066 --> 00:02:57.986 align:middle I'll cut this... 00:02:58.456 --> 00:03:00.246 align:middle then paste into assets/. 00:03:01.966 --> 00:03:05.866 align:middle So now we have an assets/images/ directory with 5 files inside. 00:03:06.636 --> 00:03:10.206 align:middle And, by the way, you can organize the assets/ directory however you want. 00:03:10.646 --> 00:03:16.726 align:middle But now, spin back over and run debug:asset again: The new files are there! 00:03:17.376 --> 00:03:19.476 align:middle On the left, see this "logical path"? 00:03:19.926 --> 00:03:23.806 align:middle That's the path we'll use to reference that file in Asset Mapper. 00:03:24.356 --> 00:03:27.116 align:middle I'll show you: let's render an img tag to the logo. 00:03:27.686 --> 00:03:30.606 align:middle Copy the starshop-logo.png logical path. 00:03:31.126 --> 00:03:34.256 align:middle Then head into templates/base.html.twig. 00:03:35.466 --> 00:03:38.756 align:middle Right above the body block - so it's not overridden 00:03:38.756 --> 00:03:42.366 align:middle by our page content - add an <img> tag with src="". 00:03:43.126 --> 00:03:49.406 align:middle Instead of trying to hardcode a path, say {{ and use a new Twig function called asset(). 00:03:50.236 --> 00:03:51.946 align:middle Pass this the logical path. 00:03:52.856 --> 00:03:53.376 align:middle That's it! 00:03:53.876 --> 00:03:55.546 align:middle Ok, I'll add an alt attribute... 00:03:55.646 --> 00:03:57.136 align:middle to be a good citizen of the web. 00:03:57.746 --> 00:03:58.866 align:middle Let's try this. 00:03:59.156 --> 00:04:00.326 align:middle Refresh and... 00:04:00.656 --> 00:04:02.626 align:middle it explodes! 00:04:02.986 --> 00:04:05.506 align:middle Did you forget to run composer require symfony/asset. 00:04:05.726 --> 00:04:07.306 align:middle Unknown function "asset". 00:04:08.236 --> 00:04:10.136 align:middle Remember: our app starts tiny. 00:04:10.556 --> 00:04:14.696 align:middle And then, as we need more features, we install more Symfony components. 00:04:15.016 --> 00:04:19.936 align:middle And often, if you try to use a feature from a component that's not installed, it'll tell you. 00:04:20.396 --> 00:04:24.876 align:middle The Twig asset() function comes from another tiny component called symfony/asset. 00:04:25.476 --> 00:04:27.596 align:middle All we need to do is follow the advice. 00:04:28.086 --> 00:04:31.616 align:middle Copy the composer require command, spin over to your terminal and run it: 00:04:33.186 --> 00:04:36.246 align:middle When it finishes, move over and refresh. 00:04:36.916 --> 00:04:38.196 align:middle There's our logo! 00:04:38.696 --> 00:04:40.046 align:middle The most interesting part? 00:04:40.286 --> 00:04:46.156 align:middle View the page source and check out the URL: /assets/images/starshop-logo- 00:04:46.556 --> 00:04:49.966 align:middle then a long string of letters and numbers, .png. 00:04:50.456 --> 00:04:55.766 align:middle This string is called the version hash and its generated based on the content of the file. 00:04:56.326 --> 00:05:01.186 align:middle That means that if we update our logo later on, this hash will change automatically. 00:05:01.746 --> 00:05:03.146 align:middle That's super important. 00:05:03.576 --> 00:05:09.446 align:middle Browsers like to cache images, JavaScript, and CSS files, which is great: it helps performance. 00:05:09.996 --> 00:05:14.666 align:middle But when we change those files, we want our users to download the new version: 00:05:14.866 --> 00:05:17.166 align:middle not keep using the outdated, cached version. 00:05:17.796 --> 00:05:22.016 align:middle But because the filename will change when we update the image, the browser is going 00:05:22.016 --> 00:05:23.796 align:middle to automatically use the new one! 00:05:24.176 --> 00:05:29.896 align:middle It looks like this: User goes to our site and downloads logo-abc123.png. 00:05:30.176 --> 00:05:31.346 align:middle Their browser caches it. 00:05:31.926 --> 00:05:37.056 align:middle On the next visit, their browser sees the img tag for logo-abc123.png, 00:05:37.216 --> 00:05:39.636 align:middle finds the file in its cache and uses it. 00:05:40.376 --> 00:05:43.996 align:middle Then we come along, update that file and deploy. 00:05:44.786 --> 00:05:48.296 align:middle The next time the user goes to our site, the img tag will be pointing 00:05:48.296 --> 00:05:52.756 align:middle at a different filename: logo-def456.png. 00:05:52.836 --> 00:05:58.736 align:middle And since the browser doesn't have that file in its cache, it downloads it fresh. 00:05:59.486 --> 00:06:03.336 align:middle This is kind of a small detail, but it's also incredibly important 00:06:03.336 --> 00:06:06.336 align:middle to make sure our users are always using the latest files. 00:06:06.766 --> 00:06:07.436 align:middle And the best part? 00:06:07.716 --> 00:06:08.866 align:middle It just works. 00:06:09.096 --> 00:06:12.326 align:middle Now that I've explained it, you'll never need to think about this again. 00:06:12.946 --> 00:06:16.736 align:middle Ok team, let's install & start using Tailwind CSS next.