WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.706 --> 00:00:03.656 align:middle Do a force refresh on the homepage. 00:00:05.776 --> 00:00:08.126 align:middle Ok, we've got some broken images. 00:00:08.446 --> 00:00:09.206 align:middle Inspect that. 00:00:12.036 --> 00:00:16.866 align:middle Of course: this points to /images/meteor-shower.jpg. 00:00:16.866 --> 00:00:22.356 align:middle Open this template: articles/homepage.html.twig. 00:00:23.316 --> 00:00:29.536 align:middle There it is: a normal asset function pointing to images/meteor-shower.jpg. 00:00:30.306 --> 00:00:34.896 align:middle That's broken because we moved our entire images/ directory 00:00:34.986 --> 00:00:37.516 align:middle out of public and into assets/. 00:00:38.306 --> 00:00:41.416 align:middle There's a nice side-effect of using a build system like Webpack: 00:00:41.826 --> 00:00:46.886 align:middle you don't need to keep your CSS, JavaScript or assets in a public directory anymore! 00:00:47.406 --> 00:00:51.596 align:middle You put them in assets/, organize them however you want, 00:00:51.596 --> 00:00:55.676 align:middle and the end-user will only ever see the final, built version. 00:00:56.216 --> 00:00:58.306 align:middle But unless you're building a single page application, 00:00:58.546 --> 00:01:03.346 align:middle you'll probably still have some cases where you want to render a good, old-fashioned img tag. 00:01:03.346 --> 00:01:07.586 align:middle And because this image is not being processed through Webpack, 00:01:07.766 --> 00:01:11.456 align:middle it's not being copied into the final build/ directory. 00:01:12.356 --> 00:01:17.216 align:middle To make life more joyful, Encore has a feature for exactly this situation. 00:01:18.446 --> 00:01:20.276 align:middle Open up webpack.config.js. 00:01:21.086 --> 00:01:27.696 align:middle And, anywhere in here, say .copyFiles() and pass this a configuration object. 00:01:28.686 --> 00:01:29.486 align:middle Obviously... 00:01:29.486 --> 00:01:32.796 align:middle this function helps you copy files from one place to another. 00:01:33.186 --> 00:01:35.036 align:middle Neato! But... 00:01:35.036 --> 00:01:36.906 align:middle how exactly do we use it? 00:01:38.046 --> 00:01:43.786 align:middle One of the nicest things about Encore is that its code is extremely well-documented. 00:01:44.316 --> 00:01:46.886 align:middle Hold Command or Ctrl and click copyFiles(). 00:01:47.676 --> 00:01:52.056 align:middle It jumps us straight to the index.js file of Encore... 00:01:52.516 --> 00:01:57.746 align:middle which is almost entirely small methods with HUGE docs above them! 00:01:58.576 --> 00:02:03.256 align:middle This is a great resource for finding out, not only how you can use a function, 00:02:03.506 --> 00:02:06.836 align:middle but what functions and features are even available! 00:02:06.896 --> 00:02:11.806 align:middle For copyFiles(), it can be as simple as: I want to copy everything 00:02:11.806 --> 00:02:14.956 align:middle from assets/images into my build directory. 00:02:15.496 --> 00:02:16.866 align:middle Yea, that sounds about right. 00:02:16.866 --> 00:02:21.666 align:middle If we did that, we could then reference those images from our img tags. 00:02:22.516 --> 00:02:27.126 align:middle Copy that config, go back to webpack.config.js and paste. 00:02:27.816 --> 00:02:30.656 align:middle Oh, I have an extra set of curly braces. 00:02:31.116 --> 00:02:35.576 align:middle And because we just made a change to webpack.config.js, find your terminal, 00:02:36.056 --> 00:02:38.866 align:middle press control+c, and re-run Encore. 00:02:42.006 --> 00:02:43.336 align:middle When that finishes... 00:02:43.886 --> 00:02:44.606 align:middle go check it out. 00:02:45.326 --> 00:02:51.886 align:middle In the public/build directory, there they are: meteor-shower.jpg, space-ice.png and so on. 00:02:52.926 --> 00:02:59.736 align:middle Um, but it is kind of lame that it just dropped them directly into build/, I'd rather, 00:02:59.836 --> 00:03:04.096 align:middle for my own sanity, copy these into build/images. 00:03:05.626 --> 00:03:06.456 align:middle Let's see... 00:03:06.686 --> 00:03:07.906 align:middle go back to the docs. 00:03:09.416 --> 00:03:12.586 align:middle Here it is: you can give it a destination... 00:03:12.866 --> 00:03:18.216 align:middle and this has a few wildcards in it, like [path], [name] and [ext]. 00:03:18.216 --> 00:03:23.916 align:middle Oh, but use this second one instead: it gives us built-in file versioning 00:03:24.276 --> 00:03:27.416 align:middle by including a hash of the contents in the filename. 00:03:28.746 --> 00:03:30.476 align:middle Back in our config, paste that. 00:03:32.006 --> 00:03:37.106 align:middle Before we restart Encore, shouldn't we delete some of these old files... 00:03:37.346 --> 00:03:40.096 align:middle at least to get them out of the way and clean things up? 00:03:40.716 --> 00:03:44.706 align:middle Nope! Well, yes, but it's already happening. 00:03:45.286 --> 00:03:49.796 align:middle One other optional feature that we're using is called cleanOutputBeforeBuild(). 00:03:50.416 --> 00:03:54.506 align:middle This is responsible for emptying the build/ directory each time we build. 00:03:55.456 --> 00:04:00.296 align:middle Ok, go restart Encore: control+C, then yarn watch. 00:04:03.476 --> 00:04:04.376 align:middle Let's go check it out! 00:04:05.876 --> 00:04:06.896 align:middle Beautiful! 00:04:07.236 --> 00:04:11.486 align:middle Everything now copies to images/ and includes a hash. 00:04:12.336 --> 00:04:13.576 align:middle Oh, but... 00:04:13.576 --> 00:04:15.076 align:middle that's a problem. 00:04:15.446 --> 00:04:17.766 align:middle What path are we supposed to use for the img tag? 00:04:18.476 --> 00:04:24.106 align:middle Should we put build/images/meteor-shower.5c77...jpg? 00:04:24.846 --> 00:04:28.946 align:middle No, because if we ever updated that image, the hash would change 00:04:29.186 --> 00:04:31.496 align:middle and all our img tags would break. 00:04:32.046 --> 00:04:34.606 align:middle And because they aren't being processed by Webpack, 00:04:34.776 --> 00:04:40.816 align:middle that failure would be the worst kind: it would fail silently! 00:04:41.636 --> 00:04:45.656 align:middle In the build/ directory, there are two special JSON files generated by Encore. 00:04:46.446 --> 00:04:51.756 align:middle The first - entrypoints.json - is awesome because the Twig helpers can use it 00:04:51.816 --> 00:04:55.146 align:middle to generate all of the script and link tags for an entry. 00:04:58.606 --> 00:05:01.756 align:middle But there's another file: manifest.json. 00:05:02.836 --> 00:05:09.066 align:middle This is a big, simple, beautiful map that contains every file that Encore outputs. 00:05:09.636 --> 00:05:13.216 align:middle It maps from the original filename to the final filename. 00:05:13.266 --> 00:05:19.496 align:middle For most files, because we haven't activated versioning globally yet, the paths are the same. 00:05:20.226 --> 00:05:21.486 align:middle But check out the images! 00:05:22.006 --> 00:05:28.936 align:middle It maps from build/images/meteor-shower.jpg to the real, versioned path! 00:05:28.986 --> 00:05:34.076 align:middle If we could read this file, we could automagically get the correct hash! 00:05:34.966 --> 00:05:40.776 align:middle When we installed WebpackEncoreBundle, the recipe added a config/packages/assets.yaml file. 00:05:40.776 --> 00:05:42.176 align:middle Inside, oh! 00:05:42.706 --> 00:05:49.716 align:middle It has json_manifest_path set to the path to manifest.json! 00:05:50.776 --> 00:05:56.146 align:middle The significance of this line is that anytime we use the asset() function in Twig, 00:05:56.656 --> 00:06:01.666 align:middle it will take that path and look for it inside of manifest.json. 00:06:01.666 --> 00:06:06.946 align:middle If it finds it, it will use the final, versioned path. 00:06:06.946 --> 00:06:10.876 align:middle This means that if we want to point to meteor-shower.jpg, 00:06:11.186 --> 00:06:17.106 align:middle all we need to do is use the build/images/meteor-shower.jpg path. 00:06:18.666 --> 00:06:21.936 align:middle Copy that, go to the homepage template, and paste it here. 00:06:23.636 --> 00:06:26.126 align:middle There are a few other images tags in this file. 00:06:26.526 --> 00:06:27.536 align:middle Search for <img. 00:06:27.536 --> 00:06:34.866 align:middle This is pointing to an uploaded file, not a static file - so that's good. 00:06:34.866 --> 00:06:40.476 align:middle Ah, but this one needs to change: build/images/alien-profile.png. 00:06:40.476 --> 00:06:46.186 align:middle And one more, add build/ before space-ice.png. 00:06:46.186 --> 00:06:48.536 align:middle Let's try it! 00:06:48.946 --> 00:06:51.606 align:middle Move over, refresh and... 00:06:51.846 --> 00:06:52.996 align:middle we got it! 00:06:53.406 --> 00:06:57.896 align:middle Inspect element: it's the final, versioned filename. 00:06:59.836 --> 00:07:04.836 align:middle Let's update the last img tags - they're in show.html.twig. 00:07:06.176 --> 00:07:11.776 align:middle Search for img tags again, then... 00:07:15.626 --> 00:07:20.086 align:middle build/, build/ and build/. 00:07:20.156 --> 00:07:24.206 align:middle Click to go view one of the articles. 00:07:27.606 --> 00:07:30.656 align:middle These comment avatars are now using the system. 00:07:31.646 --> 00:07:36.286 align:middle copyFiles() is nice because it lets you keep all your frontend files in the same directory... 00:07:36.736 --> 00:07:39.166 align:middle even if some need to be copied to the build directory. 00:07:39.616 --> 00:07:44.436 align:middle But to sweeten the deal, you're rewarded with free asset versioning. 00:07:45.296 --> 00:07:51.416 align:middle By the way, this function was added by @Lyrkan, one of the core devs for Encore and... 00:07:51.586 --> 00:07:56.726 align:middle even though it's pretty simple, it's an absolutely brilliant implementation 00:07:56.906 --> 00:07:58.876 align:middle that I haven't seen used anywhere else. 00:07:59.196 --> 00:08:02.426 align:middle So, if you like it, give him a thanks on Symfony Slack or Twitter. 00:08:03.346 --> 00:08:09.476 align:middle Next, let's create multiple entry points to support page-specific CSS and JavaScript.