WEBVTT

NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com

00:00:01.036 --> 00:00:05.626 align:middle
Our CSS and JavaScript setup is
fine: we have a public/ directory

00:00:05.666 --> 00:00:09.906 align:middle
with app.css and question_show.js.

00:00:09.976 --> 00:00:16.606 align:middle
Inside our templates - like
base.html.twig - we include the files

00:00:16.606 --> 00:00:19.086 align:middle
with traditional link or script tags.

00:00:19.596 --> 00:00:24.166 align:middle
Sure, we use this {{ asset() }} function,
but it doesn't do anything important.

00:00:24.696 --> 00:00:28.136 align:middle
Symfony isn't touching our
frontend assets at all.

00:00:28.876 --> 00:00:29.476 align:middle
That's fine.

00:00:29.846 --> 00:00:35.266 align:middle
But if you want to get serious about frontend
development - like using a frontend framework

00:00:35.266 --> 00:00:38.866 align:middle
like React or Vue - you need to
take this up to the next level.

00:00:39.216 --> 00:00:43.196 align:middle
To do that, we're going to use
a Node library called Webpack:

00:00:43.486 --> 00:00:47.456 align:middle
which is the industry-standard tool
for managing your frontend assets.

00:00:47.896 --> 00:00:51.856 align:middle
It combines and minifies your
CSS and JavaScript files...

00:00:52.306 --> 00:00:56.046 align:middle
though that's just the tip of
the iceberg of what it can do.

00:00:57.186 --> 00:01:02.876 align:middle
But... to get Webpack to work really
well requires a lot of complex config.

00:01:03.446 --> 00:01:10.086 align:middle
So, in the Symfony world, we use a
wonderful library called Webpack Encore.

00:01:10.546 --> 00:01:14.096 align:middle
It's a lightweight layer
on top of Webpack that...

00:01:14.156 --> 00:01:15.026 align:middle
makes it easier!

00:01:15.466 --> 00:01:18.996 align:middle
And we have an entire free tutorial
about it here on SymfonyCasts.

00:01:19.376 --> 00:01:21.736 align:middle
But let's go through a crash course right now.

00:01:22.326 --> 00:01:26.486 align:middle
First, make sure you have
node installed: And also yarn:

00:01:27.016 --> 00:01:30.026 align:middle
Yarn is one of the package managers for Node...

00:01:30.486 --> 00:01:32.376 align:middle
basically Composer for Node.

00:01:33.056 --> 00:01:38.646 align:middle
Before we install Encore, make sure you've
committed all your changes - I already have.

00:01:39.416 --> 00:01:43.666 align:middle
Then run: composer require encore Wait...

00:01:43.666 --> 00:01:47.556 align:middle
a minute ago, I said that
Encore is a Node library.

00:01:47.786 --> 00:01:50.846 align:middle
So why are we installing it via Composer?

00:01:51.846 --> 00:01:52.606 align:middle
Great question!

00:01:53.156 --> 00:01:56.376 align:middle
This command does not actually install Encore.

00:01:56.896 --> 00:02:01.986 align:middle
Nope, it installs a very small
bundle called webpack-encore-bundle,

00:02:02.316 --> 00:02:05.406 align:middle
which helps our Symfony app
integrate with Webpack Encore.

00:02:06.036 --> 00:02:11.486 align:middle
The real beauty is that this
bundle has a very useful recipe.

00:02:11.996 --> 00:02:15.566 align:middle
Check it out, run: git status Woh!

00:02:16.146 --> 00:02:18.766 align:middle
Its recipe did a lot for us!

00:02:19.176 --> 00:02:22.796 align:middle
One cool thing is that it
modified our .gitignore file.

00:02:23.786 --> 00:02:25.286 align:middle
Go open it in your editor.

00:02:26.446 --> 00:02:32.116 align:middle
Cool! We're now ignoring
node_modules/ - which is Node's version

00:02:32.116 --> 00:02:34.816 align:middle
of the vendor/ directory
- and a few other paths.

00:02:35.386 --> 00:02:39.086 align:middle
The recipe also added some YAML
files, which help set things up -

00:02:39.226 --> 00:02:40.946 align:middle
but you don't really need to look at them.

00:02:41.486 --> 00:02:47.516 align:middle
The most important thing the recipe did
was give us these 2 files: package.json -

00:02:47.986 --> 00:02:53.436 align:middle
which is the composer.json of
Node - and webpack.config.js,

00:02:53.916 --> 00:02:56.696 align:middle
which is the Webpack Encore configuration file.

00:02:57.316 --> 00:02:59.146 align:middle
Check out the package.json file.

00:03:00.286 --> 00:03:03.456 align:middle
This tells Node which libraries
it should download

00:03:03.796 --> 00:03:06.136 align:middle
and it already has the basic stuff we need.

00:03:06.686 --> 00:03:10.836 align:middle
Most importantly: @symfony/webpack-encore.

00:03:12.046 --> 00:03:19.746 align:middle
To tell Node to install these dependencies, run:
yarn install This command reads package.json

00:03:19.866 --> 00:03:26.156 align:middle
and downloads a ton of files and directories
into a new node_modules/ directory.

00:03:26.796 --> 00:03:30.816 align:middle
It might take a few minutes to download
everything and build a couple of packages.

00:03:31.756 --> 00:03:34.586 align:middle
When it's done, you'll see two new things.

00:03:35.216 --> 00:03:40.986 align:middle
First, you have a fancy new node_modules/
directory with tons of stuff in it.

00:03:41.476 --> 00:03:43.856 align:middle
And this is already being ignored from git.

00:03:44.946 --> 00:03:51.766 align:middle
Second, it created a yarn.lock file, which
has the same function as composer.lock.

00:03:52.186 --> 00:03:56.736 align:middle
So... you should commit the yarn.lock
file, but not worry about it otherwise.

00:03:57.606 --> 00:03:59.486 align:middle
Ok, Encore is installed!

00:04:00.246 --> 00:04:03.706 align:middle
Next, let's refactor our
frontend setup to use it.