Hello Webpack Encore

Video not working?

It looks like your browser may not support the H264 codec. If you're using Linux, try a different browser or try installing the gstreamer0.10-ffmpeg gstreamer0.10-plugins-good packages.

Thanks! This saves us from needing to use Flash or encode videos in multiple formats. And that let's us get back to making more videos :). But as always, please feel free to message us.

Our CSS and JavaScript setup is fine: we have a public/ directory with app.css and question_show.js. Inside our templates - like base.html.twig - we include the files with traditional link or script tags. Sure, we use this {{ asset() }} function, but it doesn't do anything important. Symfony isn't touching our frontend assets at all.

That's fine. But if you want to get serious about frontend development - like using a frontend framework like React or Vue - you need to take this up to the next level.

To do that, we're going to use a Node library called Webpack: which is the industry-standard tool for managing your frontend assets. It combines and minifies your CSS and JavaScript files... though that's just the tip of the iceberg of what it can do.

But... to get Webpack to work really well requires a lot of complex config. So, in the Symfony world, we use a wonderful library called Webpack Encore. It's a lightweight layer on top of Webpack that... makes it easier! And we have an entire free tutorial about it here on SymfonyCasts.

But let's go through a crash course right now.

Installing Webpack Encore

First, make sure you have node installed:

node -v

And also yarn:

yarn -v

Tip

If you don't have Node or Yarn installed - see official manuals about how to install it for your OS. For Node, see https://nodejs.org/en/download/ and for Yarn: https://classic.yarnpkg.com/en/docs/install . We recommend using Yarn version 1.x to follow this tutorial.

Yarn is one of the package managers for Node... basically Composer for Node.

Before we install Encore, make sure you've committed all your changes - I already have. Then run:

composer require encore

Wait... a minute ago, I said that Encore is a Node library. So why are we installing it via Composer? Great question! This command does not actually install Encore. Nope, it installs a very small bundle called webpack-encore-bundle, which helps our Symfony app integrate with Webpack Encore. The real beauty is that this bundle has a very useful recipe. Check it out, run:

git status

Woh! Its recipe did a lot for us! One cool thing is that it modified our .gitignore file. Go open it in your editor.

18 lines .gitignore
... lines 1 - 11
###> symfony/webpack-encore-bundle ###
/node_modules/
/public/build/
npm-debug.log
yarn-error.log
###

Cool! We're now ignoring node_modules/ - which is Node's version of the vendor/ directory - and a few other paths.

The recipe also added some YAML files, which help set things up - but you don't really need to look at them.

The most important thing the recipe did was give us these 2 files: package.json - which is the composer.json of Node - and webpack.config.js, which is the Webpack Encore configuration file.

Check out the package.json file. This tells Node which libraries it should download and it already has the basic stuff we need. Most importantly: @symfony/webpack-encore.

17 lines package.json
{
"devDependencies": {
"@symfony/webpack-encore": "^0.28.2",
"core-js": "^3.0.0",
"regenerator-runtime": "^0.13.2",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
}
}

Installing Node Dependencies with yarn

To tell Node to install these dependencies, run:

yarn install

This command reads package.json and downloads a ton of files and directories into a new node_modules/ directory. It might take a few minutes to download everything and build a couple of packages.

When it's done, you'll see two new things. First, you have a fancy new node_modules/ directory with tons of stuff in it. And this is already being ignored from git. Second, it created a yarn.lock file, which has the same function as composer.lock. So... you should commit the yarn.lock file, but not worry about it otherwise.

Ok, Encore is installed! Next, let's refactor our frontend setup to use it.

Leave a comment!

  • 2020-04-20 Oliver Wagner

    @Vladimir Sadicov that was fast - chapeau

  • 2020-04-20 Vladimir Sadicov

    Hey Oliver Wagner

    Hint
    NodeJS: https://nodejs.org/en/ - I'd recommend to use LTS version instead of current
    Yarn: https://classic.yarnpkg.com... - Here be sure to install classic yarn version, not the new one

    BTW thanks for your feedback, we will add a note to the code so nobody get confused in future

    Cheers!

  • 2020-04-20 Oliver Wagner

    A hint where to get node and yarn would be appreciated - thx