WEBVTT NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com 00:00:01.136 --> 00:00:03.626 align:middle Our CSS setup is fine. 00:00:04.176 --> 00:00:07.286 align:middle We put files into the public/ directory and then... 00:00:07.636 --> 00:00:10.076 align:middle we point to them from inside our templates. 00:00:10.706 --> 00:00:13.236 align:middle We could add JavaScript files the same way. 00:00:14.026 --> 00:00:18.486 align:middle But if we want get truly serious about writing CSS and JavaScript, 00:00:18.926 --> 00:00:21.366 align:middle we need to take this to the next level. 00:00:21.596 --> 00:00:27.146 align:middle And even if you consider yourself a mostly backend developer, the tools we're about to talk 00:00:27.146 --> 00:00:33.766 align:middle about will allow you to write CSS and JavaScript that feels easier and is less error-prone 00:00:33.766 --> 00:00:35.596 align:middle than what you're probably used to. 00:00:36.846 --> 00:00:42.836 align:middle The key to taking our setup to the next level is leveraging a node library called Webpack. 00:00:43.586 --> 00:00:46.576 align:middle Webpack is the industry standard tool for packaging, 00:00:46.636 --> 00:00:52.436 align:middle minifying and parsing your frontend CSS, JavaScript, and other files. 00:00:53.086 --> 00:00:56.636 align:middle But don't worry: Node is just JavaScript. 00:00:56.896 --> 00:01:00.166 align:middle And its role in our app will be pretty limited. 00:01:01.156 --> 00:01:03.266 align:middle Setting up Webpack can be tricky. 00:01:03.516 --> 00:01:09.736 align:middle And so, in the Symfony world, we use a lightweight tool called Webpack Encore. 00:01:10.436 --> 00:01:11.766 align:middle It's still Webpack... 00:01:11.926 --> 00:01:13.616 align:middle it just makes it easier! 00:01:13.866 --> 00:01:16.986 align:middle And we have a free tutorial about it if you want to dive deeper. 00:01:17.676 --> 00:01:19.616 align:middle But let's do a crash course right now. 00:01:20.736 --> 00:01:24.546 align:middle First, at your command line, make sure you have Node installed: 00:01:25.046 --> 00:01:32.026 align:middle node -v You'll also need either npm - which comes with Node automatically - or yarn: 00:01:32.846 --> 00:01:39.036 align:middle Npm and yarn are Node package managers: they're the Composer for the Node world... 00:01:39.276 --> 00:01:40.786 align:middle and you can use either. 00:01:41.346 --> 00:01:46.786 align:middle If you decide to use yarn - thats what I'll use - make sure to install version 1. 00:01:48.006 --> 00:01:49.866 align:middle We're about to install a new package... 00:01:50.176 --> 00:01:53.556 align:middle so let's commit everything: git add . 00:01:56.776 --> 00:02:04.166 align:middle And... looks good: So commit everything: To install Encore, run: 00:02:04.436 --> 00:02:10.576 align:middle composer require encore This installs WebpackEncoreBundle. 00:02:11.476 --> 00:02:14.056 align:middle Remember, a bundle is a Symfony plugin. 00:02:14.456 --> 00:02:19.626 align:middle And this package has a recipe: a very important recipe. 00:02:20.576 --> 00:02:23.496 align:middle Run: git status Ooh! 00:02:23.496 --> 00:02:29.656 align:middle For the first time, the recipe modified the .gitignore file. 00:02:30.716 --> 00:02:31.626 align:middle Let's go check that out. 00:02:32.256 --> 00:02:33.466 align:middle Open .gitignore. 00:02:35.206 --> 00:02:37.996 align:middle The stuff on top is what we originally had... 00:02:38.216 --> 00:02:42.966 align:middle and down here is the new stuff added by WebpackEncoreBundle. 00:02:43.606 --> 00:02:50.236 align:middle It's ignoring the node_modules/ directory, which is basically the vendor/ directory for Node. 00:02:51.136 --> 00:02:56.096 align:middle We don't need to commit that because those vendor libraries are described 00:02:56.096 --> 00:03:00.246 align:middle in another new file from the recipe: package.json. 00:03:01.256 --> 00:03:07.756 align:middle This is Node's composer.json file: it describes the Node packages that our app needs. 00:03:08.416 --> 00:03:13.716 align:middle The most important one is Webpack Encore itself, which is a Node library. 00:03:14.536 --> 00:03:18.376 align:middle It also has a few other package that will help us get our job done. 00:03:19.636 --> 00:03:22.046 align:middle The recipe also added an assets/ directory... 00:03:23.046 --> 00:03:27.706 align:middle and a configuration file to control Webpack: webpack.config.js. 00:03:28.746 --> 00:03:33.466 align:middle The assets/ directory already holds a small set of files to get us started. 00:03:34.416 --> 00:03:41.426 align:middle Ok, with Composer, if we didn't have this vendor/ directory, we could run composer install 00:03:41.716 --> 00:03:44.466 align:middle which would tell it to read the composer.json file 00:03:44.686 --> 00:03:47.736 align:middle and re-download all the packages into vendor/. 00:03:48.596 --> 00:03:53.496 align:middle The same thing happens with Node: we have a package.json file. 00:03:55.006 --> 00:04:02.326 align:middle To download this stuff, run: yarn install Or: Go node go! 00:04:02.906 --> 00:04:05.806 align:middle This will take a few moments as it downloads everything. 00:04:06.286 --> 00:04:09.756 align:middle You'll probably get a few warnings like this, which are safe to ignore. 00:04:11.006 --> 00:04:13.426 align:middle Great! This did two things. 00:04:14.196 --> 00:04:16.936 align:middle First, it downloaded a bunch of files 00:04:16.936 --> 00:04:21.226 align:middle into the node_modules/ directory: the "vendor" directory for Node. 00:04:22.386 --> 00:04:24.776 align:middle It also created a yarn.lock file... 00:04:25.106 --> 00:04:28.356 align:middle or package-lock.json if you're using npm. 00:04:29.156 --> 00:04:35.996 align:middle This serves the same purpose of composer.lock: it stores the exact versions of all the packages 00:04:36.316 --> 00:04:40.946 align:middle so that you get the same versions next time you install your dependencies. 00:04:41.606 --> 00:04:45.566 align:middle For the most part, you don't need to worry about these lock files... 00:04:45.816 --> 00:04:47.566 align:middle except that you should commit them. 00:04:48.146 --> 00:04:48.756 align:middle Let's do that. 00:04:49.256 --> 00:04:52.846 align:middle Run: git status Then: git add . 00:04:55.106 --> 00:04:59.326 align:middle Beautiful: And commit: Hey! 00:04:59.526 --> 00:05:02.106 align:middle Webpack Encore is now installed! 00:05:02.426 --> 00:05:05.436 align:middle But... it's not doing anything yet! 00:05:05.766 --> 00:05:06.566 align:middle Freeloader. 00:05:07.546 --> 00:05:11.776 align:middle Next, let's use it to take our JavaScript up to the next level.