WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:00.986 --> 00:00:07.456 align:middle There is one last thing I want to talk about, and it's one of my favorite features in Encore. 00:00:08.026 --> 00:00:11.456 align:middle Here's the question: how can we version our assets? 00:00:12.216 --> 00:00:16.266 align:middle Or, even more simple, how can we bust browser cache? 00:00:16.266 --> 00:00:21.836 align:middle For example, right now, if I change something in RepLogApp.js, 00:00:22.316 --> 00:00:27.356 align:middle then of course Webpack will create an updated rep_log.js file. 00:00:27.886 --> 00:00:31.266 align:middle But, when an existing user comes back to our site, 00:00:31.646 --> 00:00:35.266 align:middle their browser might use the old, cached version! 00:00:35.906 --> 00:00:39.286 align:middle Lame! This is a classic problem. 00:00:40.086 --> 00:00:44.686 align:middle But with Encore, we can solve it beautifully and automatically! 00:00:45.446 --> 00:00:50.846 align:middle In webpack.config.js, first add .cleanupOutputBeforeBuild(). 00:00:51.646 --> 00:00:56.476 align:middle That's a nice little function that will empty the public/build directory whenever you 00:00:56.476 --> 00:00:57.236 align:middle run Encore. 00:00:58.046 --> 00:01:01.666 align:middle Then, here's the key: enableVersioning(). 00:01:03.606 --> 00:01:04.166 align:middle That's it! 00:01:04.856 --> 00:01:15.776 align:middle Because we just changed our config, restart Encore: Now look at the build/ directory. 00:01:16.346 --> 00:01:21.746 align:middle Woh! Suddenly, all of our files have a hash in the filename! 00:01:22.446 --> 00:01:25.346 align:middle The hash is based on the file's contents: 00:01:25.806 --> 00:01:29.856 align:middle so whenever the file changes, it gets a new filename. 00:01:30.676 --> 00:01:32.766 align:middle This is awesome! 00:01:33.256 --> 00:01:37.886 align:middle Now when rep_log.js changes, it will have a new filename. 00:01:38.386 --> 00:01:44.206 align:middle And when we deploy to production, the user's browser will see the new filename and load it, 00:01:44.516 --> 00:01:46.616 align:middle instead of using the old, cached version. 00:01:47.546 --> 00:01:49.416 align:middle Perfect! Except... 00:01:49.416 --> 00:01:52.116 align:middle we just broke everything. 00:01:52.116 --> 00:01:54.556 align:middle Find your browser and refresh. 00:01:55.896 --> 00:01:58.066 align:middle Yep! It's horrible! 00:01:58.836 --> 00:02:05.946 align:middle And this makes sense: in the base layout, our script tag simply points to build/layout.js. 00:02:06.366 --> 00:02:10.226 align:middle But this is not the filename anymore - it's missing the hash part! 00:02:11.156 --> 00:02:14.666 align:middle Of course, we could type the filename manually here. 00:02:14.876 --> 00:02:16.236 align:middle But, gross! 00:02:17.116 --> 00:02:21.686 align:middle Then, every time we updated a file, we would need to update its script tag. 00:02:22.686 --> 00:02:24.456 align:middle Here's the key to fix this. 00:02:25.296 --> 00:02:28.816 align:middle Behind the scenes, as soon as we started using Encore, 00:02:29.376 --> 00:02:33.756 align:middle it generated a manifest.json file automatically. 00:02:34.586 --> 00:02:39.986 align:middle This is a map from the source filename to the current hashed filename! 00:02:40.716 --> 00:02:41.816 align:middle That's great! 00:02:42.496 --> 00:02:47.426 align:middle If we could somehow tell Symfony's asset function to read this 00:02:47.466 --> 00:02:50.406 align:middle and make the transformation, then, well... 00:02:51.066 --> 00:02:53.456 align:middle everything would work perfectly! 00:02:54.106 --> 00:02:55.096 align:middle And... yea! 00:02:55.746 --> 00:02:57.936 align:middle That feature exists! 00:02:58.696 --> 00:03:01.726 align:middle Open config/packages/framework.yaml. 00:03:03.106 --> 00:03:11.476 align:middle Anywhere, but I'll do it at the bottom, add assets: then json_manifest_path set 00:03:11.476 --> 00:03:18.866 align:middle to %kernel.project_dir%/public/build /manifest.json. 00:03:20.066 --> 00:03:25.926 align:middle This is a built-in feature that tells Symfony to look for a JSON file at this path, 00:03:25.926 --> 00:03:29.676 align:middle and to use it to lookup the real filename. 00:03:30.676 --> 00:03:31.326 align:middle In other words... 00:03:31.586 --> 00:03:33.016 align:middle just, refresh! 00:03:35.176 --> 00:03:37.626 align:middle Yea, everything is beautiful again! 00:03:38.476 --> 00:03:45.106 align:middle Check out the page source: it's using the hashed filename from the manifest file. 00:03:49.286 --> 00:03:54.616 align:middle And if you change one of the files - like layout.js: add a console.log()... 00:03:55.686 --> 00:03:58.886 align:middle as soon as we do this, Webpack rebuilds. 00:04:00.046 --> 00:04:04.276 align:middle In the build/ directory - you might need to synchronize it, but yes! 00:04:04.726 --> 00:04:07.056 align:middle It creates a new filename. 00:04:08.176 --> 00:04:12.596 align:middle When you refresh, the system automatically uses that inside the source. 00:04:14.136 --> 00:04:17.426 align:middle This is free asset versioning and cache busting! 00:04:17.426 --> 00:04:24.026 align:middle If you want to get really crazy, you can also now give your site a performance boost! 00:04:25.066 --> 00:04:30.846 align:middle To do that, you'll need to configure your web server to set long-lived Expires header 00:04:31.266 --> 00:04:33.076 align:middle on any files in the /build directory. 00:04:34.076 --> 00:04:40.756 align:middle Basically, by setting an Expires header, your web server can instruct the browser of each user 00:04:41.056 --> 00:04:43.416 align:middle to cache any downloaded assets... 00:04:43.766 --> 00:04:49.666 align:middle forever! Then, when the user continues browsing your site, it will load faster 00:04:49.946 --> 00:04:54.386 align:middle because their browser knows it's safe to use these files from cache. 00:04:54.536 --> 00:04:58.946 align:middle And of course, when we do make a change to a file in the future, 00:04:59.256 --> 00:05:02.726 align:middle the browser will download it thanks to its new filename. 00:05:03.686 --> 00:05:08.366 align:middle The exact config is different in Nginx versus Apache, but it's a common thing to add. 00:05:08.946 --> 00:05:12.706 align:middle Google for "Nginx expires header for directory". 00:05:14.446 --> 00:05:20.346 align:middle OK guys, I hope, hope, hope you love Webpack Encore as much as I do! 00:05:21.086 --> 00:05:26.326 align:middle It has even more features that we didn't talk about, like enableReactPreset() 00:05:26.746 --> 00:05:31.156 align:middle to build React apps or enableVueLoader for Vue.js. 00:05:31.156 --> 00:05:37.766 align:middle And we're adding new features all the time so that it's easier to use front-end frameworks 00:05:38.066 --> 00:05:43.076 align:middle and enjoy some of the really amazing things that are coming from the JavaScript world... 00:05:43.446 --> 00:05:46.976 align:middle without needing to read 100 blog posts every day. 00:05:46.976 --> 00:05:51.676 align:middle So get out there and write amazing JavaScript! 00:05:52.226 --> 00:05:57.386 align:middle And I hope you'll stay with us for our next tutorial about React.js & Symfony! 00:05:58.476 --> 00:06:00.096 align:middle All right guys, seeya next time!