WEBVTT

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

00:00:01.156 --> 00:00:03.776 align:middle
Okay: here's how this whole thing works.

00:00:04.036 --> 00:00:10.326 align:middle
The recipe added a new assets/ directory
with a couple of example CSS and JS files.

00:00:11.166 --> 00:00:16.416 align:middle
The app.js file basically just
console.log()'s something.

00:00:16.596 --> 00:00:19.226 align:middle
The app.css changes the background
color to light gray.

00:00:20.236 --> 00:00:25.796 align:middle
Webpack Encore is entirely configured
by one file: webpack.config.js.

00:00:26.196 --> 00:00:30.446 align:middle
We won't talk much about this file -
we'll save that for the Encore tutorial -

00:00:30.806 --> 00:00:36.676 align:middle
but it's already configured to point
at the app.js and app.css files:

00:00:37.586 --> 00:00:39.966 align:middle
it knows that it needs to process them.

00:00:41.136 --> 00:00:47.366 align:middle
To execute Encore, find your terminal
and run: yarn watch This is a shortcut

00:00:47.366 --> 00:00:51.406 align:middle
for running yarn run encore dev -- watch.

00:00:52.166 --> 00:00:53.506 align:middle
What does this do?

00:00:53.976 --> 00:01:00.906 align:middle
It reads those 2 files in assets/, does some
processing on them, and outputs a built version

00:01:00.906 --> 00:01:04.606 align:middle
of each inside a new public/build/ directory.

00:01:05.466 --> 00:01:08.126 align:middle
Here is the "built" app.css file...

00:01:08.516 --> 00:01:11.076 align:middle
and the built app.js file.

00:01:11.816 --> 00:01:16.336 align:middle
If we ran Encore in production mode
- which is just a different command -

00:01:16.706 --> 00:01:19.116 align:middle
it would minimize the contents of each file.

00:01:19.866 --> 00:01:23.796 align:middle
There's a lot more cool stuff going
on, but this is the basic idea:

00:01:24.336 --> 00:01:29.946 align:middle
we code in the assets/ directory, but
point to the built files in our templates.

00:01:29.986 --> 00:01:36.466 align:middle
For example, in base.html.twig, instead
of pointing at the old app.css file,

00:01:36.696 --> 00:01:40.116 align:middle
we want to point at the one
in the build/ directory.

00:01:40.766 --> 00:01:45.156 align:middle
That's simple enough, but the
WebpackEncoreBundle has a shortcut

00:01:45.156 --> 00:01:52.386 align:middle
to make it even easier: {{
encore_entry_link_tags() }} and pass this app,

00:01:52.896 --> 00:01:58.276 align:middle
because that's the name of the source
files - called an "entry" in Webpack land.

00:01:59.226 --> 00:02:05.166 align:middle
At the bottom, render the script tag with
{{ encore_entry_script_tags('app') }}.

00:02:06.156 --> 00:02:06.766 align:middle
Let's try it!

00:02:07.276 --> 00:02:08.656 align:middle
Move over and refresh.

00:02:09.456 --> 00:02:10.416 align:middle
Did it work?

00:02:10.706 --> 00:02:13.296 align:middle
It did! The background color is gray...

00:02:13.556 --> 00:02:22.176 align:middle
and if I bring up the console,
there's the log: Hello Webpack Encore!

00:02:23.696 --> 00:02:27.886 align:middle
If you look at the HTML source,
there's nothing special going on:

00:02:28.186 --> 00:02:33.976 align:middle
we have a normal link tag
pointing to /build/app.css.

00:02:33.976 --> 00:02:38.076 align:middle
Now that this is working, let's
move our CSS into the new system.

00:02:38.826 --> 00:02:47.206 align:middle
Open public/css/app.css, copy all of this,
then right click and delete the file.

00:02:50.026 --> 00:02:54.936 align:middle
Now open the new app.css
inside assets/ and paste.

00:02:55.686 --> 00:02:58.116 align:middle
As soon as I do that, when I refresh...

00:02:58.496 --> 00:03:01.786 align:middle
it works! Our CSS is back!

00:03:02.296 --> 00:03:09.506 align:middle
The reason is that - if you check your terminal
- yarn watch is watching our files for changes.

00:03:10.186 --> 00:03:15.376 align:middle
As soon as we modified the
app.css file, it re-read that file

00:03:15.546 --> 00:03:18.896 align:middle
and dumped a new version into
the public/build directory.

00:03:19.636 --> 00:03:21.816 align:middle
That's why we keep this running
in the background.

00:03:22.496 --> 00:03:25.326 align:middle
Let's do the same thing for
our custom JavaScript.

00:03:25.866 --> 00:03:32.396 align:middle
Open question_show.js and, instead of
having a page-specific JavaScript file -

00:03:32.836 --> 00:03:38.456 align:middle
where we only include this on our "show" page
- to keep things simple, I'm going to put this

00:03:38.526 --> 00:03:43.576 align:middle
into the new app.js, which
is loaded on every page.

00:03:44.326 --> 00:03:48.016 align:middle
Then go delete the public/js/
directory entirely...

00:03:48.656 --> 00:03:50.346 align:middle
and public/css/.

00:03:51.776 --> 00:03:59.826 align:middle
Also open up templates/question/show.html.twig
and, at the bottom, remove the old script tag.

00:04:00.926 --> 00:04:04.956 align:middle
With any luck, Encore already rebuilt my app.js.

00:04:05.066 --> 00:04:12.216 align:middle
So if we click to view a question -
I'll refresh just to be safe - and...

00:04:12.216 --> 00:04:13.486 align:middle
click the vote icons.

00:04:14.926 --> 00:04:18.096 align:middle
Yes! This still works.

00:04:18.096 --> 00:04:22.356 align:middle
Now that we're using Encore, there
are some really cool things we can do.

00:04:22.966 --> 00:04:29.686 align:middle
Here's one: instead of linking to a CDN or
downloading jQuery directly into our project

00:04:29.686 --> 00:04:36.786 align:middle
and committing it, we can require jQuery and
install it into our node_modules/ directory...

00:04:37.276 --> 00:04:43.716 align:middle
which is exactly how we're used to doing
things in PHP: we install third-party libraries

00:04:43.716 --> 00:04:46.996 align:middle
into vendor/ instead of downloading
them manually.

00:04:47.776 --> 00:04:52.946 align:middle
To do that, open a new terminal
tab and run: yarn add jquery --

00:04:52.946 --> 00:05:01.456 align:middle
dev This is equivalent to the composer require
command: it adds jquery to the package.json file

00:05:01.716 --> 00:05:04.556 align:middle
and downloads it into node_modules/.

00:05:05.106 --> 00:05:07.406 align:middle
The -- dev part is not important.

00:05:08.686 --> 00:05:14.836 align:middle
Next, inside base.html.twig, remove
jQuery entirely from the layout.

00:05:14.836 --> 00:05:18.326 align:middle
If you go back to your browser
and refresh the page now...

00:05:23.226 --> 00:05:28.356 align:middle
it's totally broken: $ is not
defined ...coming from app.js.

00:05:29.366 --> 00:05:34.486 align:middle
That makes sense: we did just download
jQuery into our node_modules/ directory -

00:05:35.166 --> 00:05:39.786 align:middle
you can find a directory here called
jquery - but we're not using it yet.

00:05:40.556 --> 00:05:42.786 align:middle
How do we use it?

00:05:42.786 --> 00:05:49.036 align:middle
Inside app.js, uncomment this
import line: import $ from 'jquery'.

00:05:49.606 --> 00:05:55.796 align:middle
This "loads" the jquery package we
installed and assigns it to a $ variable.

00:05:56.356 --> 00:06:01.416 align:middle
All these $ variables below are
referencing the value we imported.

00:06:02.346 --> 00:06:12.076 align:middle
Here's the really cool part: without making
any other changes, when we refresh, it works!

00:06:12.666 --> 00:06:16.016 align:middle
Webpack noticed that we're importing jquery

00:06:16.386 --> 00:06:22.006 align:middle
and automatically packaged it
inside of the built app.js file.

00:06:22.536 --> 00:06:26.226 align:middle
We import the stuff we need,
and Webpack takes care of...

00:06:26.486 --> 00:06:27.916 align:middle
packaging it all together.

00:06:28.796 --> 00:06:32.046 align:middle
We can do the same thing for the Bootstrap CSS.

00:06:32.046 --> 00:06:36.356 align:middle
On the top of base.html.twig,
delete the link tag for Bootstrap.

00:06:37.416 --> 00:06:41.776 align:middle
No surprise, when we refresh,
our site looks terrible.

00:06:41.776 --> 00:06:48.156 align:middle
To fix it, find your terminal
and run: yarn add bootstrap --

00:06:48.156 --> 00:06:53.236 align:middle
dev This downloads the bootstrap
package into node_modules/.

00:06:53.806 --> 00:06:57.386 align:middle
This package contains both JavaScript and CSS.

00:06:57.386 --> 00:06:59.176 align:middle
We want to bring in the CSS.

00:06:59.866 --> 00:07:07.356 align:middle
To do that, open app.css and, at the top,
use the good-old-fashioned @import syntax.

00:07:07.356 --> 00:07:11.136 align:middle
Inside double quotes, say ~bootstrap.

00:07:11.696 --> 00:07:17.146 align:middle
In CSS, this ~ is a special way to
say that you want to load the CSS

00:07:17.196 --> 00:07:20.926 align:middle
from a bootstrap package inside node_modules/.

00:07:21.696 --> 00:07:23.926 align:middle
Move over, refresh and...

00:07:24.166 --> 00:07:25.836 align:middle
we are back!

00:07:26.366 --> 00:07:30.916 align:middle
Webpack saw this import, grabbed
the CSS from the bootstrap package,

00:07:31.266 --> 00:07:34.846 align:middle
and included it in the final app.css file.

00:07:35.156 --> 00:07:36.296 align:middle
How cool is that?

00:07:36.966 --> 00:07:39.936 align:middle
This is just the start of
what Webpack Encore can do.

00:07:40.526 --> 00:07:45.096 align:middle
It can also minimize your files for
production, supports Sass or LESS compiling,

00:07:45.476 --> 00:07:51.566 align:middle
comes with React and Vue.js support, has
automatic filename versioning and more.

00:07:52.026 --> 00:07:55.366 align:middle
To go further, check out our
free Webpack Encore tutorial.

00:07:55.966 --> 00:07:58.096 align:middle
And... that's it for this tutorial!

00:07:58.536 --> 00:08:01.196 align:middle
Congratulations for sticking with me to the end!

00:08:01.786 --> 00:08:05.126 align:middle
You already understand the most
important parts of Symfony.

00:08:05.706 --> 00:08:10.716 align:middle
In the next tutorial, we're going unlock
even more of your Symfony potential

00:08:10.866 --> 00:08:14.116 align:middle
by uncovering the secrets of services.

00:08:14.416 --> 00:08:16.196 align:middle
You'll be unstoppable.

00:08:16.916 --> 00:08:22.056 align:middle
As always, if you have questions,
problems or have a really funny story -

00:08:22.266 --> 00:08:26.856 align:middle
especially if it involves your cat - we
would love to hear from you in the comments.

00:08:27.666 --> 00:08:29.196 align:middle
Alright friends - seeya next time!