Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine
This tutorial has a new version, check it out!

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:^1.8"

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!

14
Login or Register to join the conversation
Timera M. Avatar
Timera M. Avatar Timera M. | posted 9 months ago

Hi dears. Can anyone help me with this error. It happens when I launch the command:

yarn install

.
I tried several ideas, but no way. Please help.
PS C:\Users\Anonymous\Documents\GitHub\Symfony_learnings\codeSymfony> yarn install
yarn install v1.22.15
info No lockfile found.
[1/4] Resolving packages...
error An unexpected error occurred: "https:registry.yarnpkg.com/@symfony%2fstimulus-bridge: Invalid URI \"https:registry.yarnpkg.com/@symfony%2fstimulus-bridge\"".
info If you think this is a bug, please open a bug report with the information provided in "C:\\Users\\Anonymous\\Documents\\GitHub\\Symfony_learnings\\codeSymfo
ny\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
PS C:\Users\Anonymous\Documents\GitHub\Symfony_learnings\codeSymfony>

Reply

Hey Mo31

Can you try to run it on simple cmd app? not powershel?

Cheers!

Reply
Covi A. Avatar
Covi A. Avatar Covi A. | posted 1 year ago

When i am giving this command yarn --version it's give me this result
user@user-HP-Pavilion-g6-Notebook-PC:~$ yarn --version
0.32+git

and when i am giving this command yarn -v it's giving me this result
user@user-HP-Pavilion-g6-Notebook-PC:~$ yarn -v
ERROR: There are no scenarios; must have at least one.

and when i am trying with this command yarn install then it's give me this result
user@user-HP-Pavilion-g6-Notebook-PC:~/PhpstormProjects/ProjectThree$ yarn install
00h00m00s 0/0: : ERROR: [Errno 2] No such file or directory: 'install'

please remember my os is linux ubuntu

can you help me please

Reply

Hey Monoranjan Das

It seems to me that your Yarn installation is not working correctly, I'd re-install it. Here you can follow the steps of how to do it (I usually do it as shown in the second example) https://phoenixnap.com/kb/h...

Cheers!

Reply
Covi A. Avatar

thank you very much diego for your help. it's working.

1 Reply
Farshad Avatar
Farshad Avatar Farshad | posted 1 year ago

I did yarn -v and it showed me the version (meaning that yarn is already isntalled)
so when I did yarn install, it said: succes Already up-to-date
my node_modules directory only has bootstrap in it that I installed manually.
What am I supposed to do?

Reply

Hey Farry7,

If you already have Yarn set up and running, great, that's the first step. Then, you have to install Symfony Encore, and then, run yarn install. If you already did that, try removing your node_modules directory and try again. If nothing works, I'd need to see your package.json file

Cheers!

Reply
Farshad Avatar

It says: yarn add webpack-notifier@^1.6.0 --dev
I tried it and now it says: error An unexpected error occurred "https://registry.yarnpkg.co... Not found"

Reply

Hey @Farry7

I'm glad you got it working! I'm not sure exactly what the problem was with your package.json file, but good debugging!

Cheers!

Reply
Peter K. Avatar
Peter K. Avatar Peter K. | posted 1 year ago

I seems to have lots of warnings when running yarn install

$ yarn install
yarn install v1.22.5
info No lockfile found.
[1/4] Resolving packages...
warning @symfony/webpack-encore > webpack-dev-server > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning @symfony/webpack-encore > webpack-dev-server > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning @symfony/webpack-encore > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning @symfony/webpack-encore > resolve-url-loader > rework > css > urix@0.1.0: Please see https://github.com/lydell/u...
warning @symfony/webpack-encore > resolve-url-loader > rework > css > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/u...
warning @symfony/webpack-encore > resolve-url-loader > rework > css > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/r...
[2/4] Fetching packages...
warning mini-css-extract-plugin@0.4.2: Invalid bin field for "mini-css-extract-plugin".
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.1.3: The platform "win32" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 30.85s.

Reply

Hey Peter!

As crazy as it sounds, this is completely normal :/. Many of these are due to old dependencies - in the npm world, there are *so* many dependencies, and new major versions are created quickly and before long, your app is relying on abandoned or deprecated packages. So, these are fine - but in a real app, most of them would go away by upgrading to the latest dependencies.

Cheers!

Reply
Oliver W. Avatar
Oliver W. Avatar Oliver W. | posted 2 years ago

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

Reply

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!

Reply
Oliver W. Avatar

@Vladimir Sadicov that was fast - chapeau

Reply
Cat in space

"Houston: no signs of life"
Start the conversation!

This tutorial also works great for Symfony 6!

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.3.0 || ^8.0.0",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "easycorp/easy-log-handler": "^1.0.7", // v1.0.9
        "sensio/framework-extra-bundle": "^6.0", // v6.2.1
        "symfony/asset": "5.0.*", // v5.0.11
        "symfony/console": "5.0.*", // v5.0.11
        "symfony/debug-bundle": "5.0.*", // v5.0.11
        "symfony/dotenv": "5.0.*", // v5.0.11
        "symfony/flex": "^1.3.1", // v1.17.5
        "symfony/framework-bundle": "5.0.*", // v5.0.11
        "symfony/monolog-bundle": "^3.0", // v3.5.0
        "symfony/profiler-pack": "*", // v1.0.5
        "symfony/routing": "5.1.*", // v5.1.11
        "symfony/twig-pack": "^1.0", // v1.0.1
        "symfony/var-dumper": "5.0.*", // v5.0.11
        "symfony/webpack-encore-bundle": "^1.7", // v1.8.0
        "symfony/yaml": "5.0.*" // v5.0.11
    },
    "require-dev": {
        "symfony/profiler-pack": "^1.0" // v1.0.5
    }
}