WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.066 --> 00:00:03.666 align:middle Ok team: just one more thing to talk about: 00:00:04.186 --> 00:00:07.486 align:middle how the heck can we deploy all of this to production? 00:00:08.266 --> 00:00:12.906 align:middle Well, before that, our files aren't even ready for production yet! 00:00:14.036 --> 00:00:15.836 align:middle Open the public/build/ directory. 00:00:17.476 --> 00:00:21.586 align:middle If you open any of these files, you'll notice that they are not minified. 00:00:21.996 --> 00:00:26.406 align:middle And at the bottom, each has a bunch of extra stuff for "sourcemaps": 00:00:27.016 --> 00:00:30.726 align:middle a bit of config that makes debugging our code easier in the browser. 00:00:32.106 --> 00:00:36.066 align:middle We get all of this because we've been creating a development build. 00:00:36.956 --> 00:00:46.676 align:middle Now, at your terminal, run: yarn build This is a shortcut for yarn encore production. 00:00:47.886 --> 00:00:53.196 align:middle When we installed Encore, we got a pre-started package.json file with... 00:00:53.346 --> 00:00:54.976 align:middle this scripts section. 00:00:55.856 --> 00:01:01.956 align:middle So, the real command to build for production is encore production, or, really: Anyways, 00:01:02.056 --> 00:01:11.786 align:middle that's the key thing: Encore has two main modes: dev and production. 00:01:16.006 --> 00:01:16.976 align:middle And... done! 00:01:16.976 --> 00:01:20.246 align:middle On a big project, this might take a bit longer - 00:01:20.576 --> 00:01:23.806 align:middle production builds can be much slower than dev builds. 00:01:24.686 --> 00:01:27.586 align:middle Now we have a very different build/ directory. 00:01:27.586 --> 00:01:31.496 align:middle First, all of the names are bit obfuscated. 00:01:31.496 --> 00:01:36.496 align:middle Before, we had names that included things like app~vendor, 00:01:36.756 --> 00:01:39.996 align:middle which kind of exposed the internal structure 00:01:39.996 --> 00:01:43.656 align:middle of what entry points we had and how they're sharing data. 00:01:44.276 --> 00:01:49.696 align:middle No huge deal, but that's gone: replaced by these numbered files. 00:01:50.736 --> 00:01:55.326 align:middle Also, if you look inside any of these, they're now totally minified 00:01:55.326 --> 00:01:57.406 align:middle and won't have the sourcemap at the bottom. 00:01:58.636 --> 00:02:03.256 align:middle You will still see these license headers - that's there for legal reasons, 00:02:03.496 --> 00:02:06.136 align:middle though you can configure them to be removed. 00:02:07.156 --> 00:02:10.426 align:middle Those are the only comments that are left in these final files. 00:02:11.106 --> 00:02:17.156 align:middle And even though all the filenames just changed, we instantly move over, refresh, and... 00:02:17.436 --> 00:02:21.926 align:middle it works: the Twig helpers are rendering the new filenames. 00:02:21.926 --> 00:02:26.336 align:middle In fact, you may have noticed something special about the new filenames: 00:02:27.246 --> 00:02:30.496 align:middle every single one now has a hash in it. 00:02:31.736 --> 00:02:35.426 align:middle Inside our webpack.config.js file, this is happening thanks 00:02:35.426 --> 00:02:38.086 align:middle to this line: enableVersioning(). 00:02:39.066 --> 00:02:44.556 align:middle And check it out, the first argument - which is a boolean of whether or not we want versioning - 00:02:44.786 --> 00:02:47.816 align:middle is using a helper called Encore.isProduction(). 00:02:48.146 --> 00:02:50.886 align:middle That disables versioning for our dev builds, 00:02:50.986 --> 00:02:54.896 align:middle just cause we don't need it, but enables it for production. 00:02:56.016 --> 00:03:03.856 align:middle The really awesome thing is that every time the contents of this article_show.css file changes, 00:03:04.136 --> 00:03:10.706 align:middle it will automatically get a new hash: the hash is built from the contents of the file. 00:03:11.656 --> 00:03:14.336 align:middle Of course, we don't need to change anything in our code, 00:03:14.616 --> 00:03:18.686 align:middle because the Twig helpers will automatically render the new filename 00:03:18.686 --> 00:03:19.916 align:middle in the script or link tag. 00:03:20.996 --> 00:03:21.676 align:middle Basically... 00:03:21.916 --> 00:03:26.326 align:middle we get free file versioning, or browser cache busting. 00:03:27.576 --> 00:03:33.086 align:middle This also means that you should totally take advantage of something called long-term caching. 00:03:33.786 --> 00:03:39.886 align:middle This is where you configure your web server - like Nginx - to set an Expires header 00:03:40.176 --> 00:03:44.186 align:middle on every file it serves from the /build directory 00:03:44.616 --> 00:03:48.646 align:middle with some super-distant value, like 1 year from now. 00:03:49.756 --> 00:03:55.706 align:middle The result is that, once a user has downloaded these files, they will never ask our server 00:03:55.706 --> 00:03:58.736 align:middle for them again: they'll just use their browser cache. 00:03:59.706 --> 00:04:03.376 align:middle But, as soon as we update a file, it'll have a new filename 00:04:03.376 --> 00:04:06.026 align:middle and the user's browser will ask for it again. 00:04:06.506 --> 00:04:08.446 align:middle It's just free performance. 00:04:08.776 --> 00:04:13.656 align:middle And if you got a step further and put something like CloudFlare in front of your site, 00:04:13.656 --> 00:04:17.536 align:middle your server will receive even less requests for your assets. 00:04:18.806 --> 00:04:24.006 align:middle Now that we have these, optimized, versioned files, how can we deploy them up to production? 00:04:25.046 --> 00:04:26.726 align:middle Well... it depends. 00:04:27.196 --> 00:04:30.066 align:middle It depends on how sophisticated your deployment is. 00:04:30.066 --> 00:04:36.016 align:middle If you have a really simple deployment, where you basically, run git pull on production 00:04:36.016 --> 00:04:40.916 align:middle and then clear the Symfony cache, you're probably going to need to install node 00:04:40.916 --> 00:04:45.926 align:middle on your production server, run yarn install, and then run yarn build 00:04:46.246 --> 00:04:48.826 align:middle up on production, each time you deploy. 00:04:49.946 --> 00:04:55.866 align:middle That's not ideal, but if you have a simple deployment system, that keeps it simple. 00:04:55.866 --> 00:05:00.926 align:middle If you have a slightly more sophisticated system, you can do it better. 00:05:01.956 --> 00:05:08.856 align:middle The key thing to understand is that, once you've run yarn build, the only thing that needs to go 00:05:08.856 --> 00:05:12.346 align:middle to production is the public/build directory. 00:05:13.196 --> 00:05:17.886 align:middle So you could literally run yarn build on a different server - or even locally - 00:05:18.226 --> 00:05:22.696 align:middle and then just make sure that this build/ directory gets copied to production. 00:05:23.846 --> 00:05:24.406 align:middle That's it! 00:05:24.586 --> 00:05:27.086 align:middle You don't need to have node installed on production 00:05:27.086 --> 00:05:29.596 align:middle and you don't need to run anything with yarn. 00:05:30.376 --> 00:05:32.546 align:middle If you followed our tutorial on Ansistrano, 00:05:33.006 --> 00:05:36.076 align:middle you would run yarn wherever you're executing Ansistrano, 00:05:36.476 --> 00:05:39.366 align:middle then use the copy module to copy the directory. 00:05:40.876 --> 00:05:42.136 align:middle Ok, that's it! 00:05:42.576 --> 00:05:46.176 align:middle Actually, there are more features inside Encore - many more, 00:05:46.176 --> 00:05:49.636 align:middle like enabling TypeScript, React or Vue support. 00:05:50.146 --> 00:05:52.486 align:middle But getting those all going should be easy for you now. 00:05:53.426 --> 00:05:54.896 align:middle Go try them, and report back. 00:05:55.456 --> 00:05:58.956 align:middle And, like always, if you have any questions, find us in the comments section. 00:06:00.126 --> 00:06:01.706 align:middle All right friends, seeya next time.