SymfonyCasts stands united with the people of Ukraine
gstreamer0.10-ffmpeg
gstreamer0.10-plugins-good packages.
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.
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.
| ... 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.
| { | |
| "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" | |
| } | |
| } |
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.
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
Hey Covi A.
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!
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?
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!
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"
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!
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.
Hey Peter K.!
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!
Hey Oliver W.
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!
// 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
}
}
Hi dears. Can anyone help me with this error. It happens when I launch the command: <blockquote>yarn install</blockquote>.
I tried several ideas, but no way. Please help.
PS C:\Users\Anonymous\Documents\GitHub\Symfony_learnings\codeSymfony> yarn install<br />yarn install v1.22.15<br />info No lockfile found.<br />[1/4] Resolving packages...<br />error An unexpected error occurred: "https:registry.yarnpkg.com/@symfony%2fstimulus-bridge: Invalid URI \"https:registry.yarnpkg.com/@symfony%2fstimulus-bridge\"".<br />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<br />ny\\yarn-error.log".<br />info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.<br />info There appears to be trouble with your network connection. Retrying...<br />info There appears to be trouble with your network connection. Retrying...<br />info There appears to be trouble with your network connection. Retrying...<br />info There appears to be trouble with your network connection. Retrying...<br />PS C:\Users\Anonymous\Documents\GitHub\Symfony_learnings\codeSymfony>