SymfonyCasts stands united with the people of Ukraine
gstreamer0.10-ffmpeg
gstreamer0.10-plugins-good packages.
Our CSS setup is fine. We put files into the public/ directory and then... we point to them from inside our templates. We could add JavaScript files the same way.
But if we want get truly serious about writing CSS and JavaScript, we need to take this to the next level. And even if you consider yourself a mostly backend developer, the tools we're about to talk about will allow you to write CSS and JavaScript that feels easier and is less error-prone than what you're probably used to.
The key to taking our setup to the next level is leveraging a node library called Webpack. Webpack is the industry standard tool for packaging, minifying and parsing your frontend CSS, JavaScript, and other files. But don't worry: Node is just JavaScript. And its role in our app will be pretty limited.
Setting up Webpack can be tricky. And so, in the Symfony world, we use a lightweight tool called Webpack Encore. It's still Webpack... it just makes it easier! And we have a free tutorial about it if you want to dive deeper.
But let's do a crash course right now. First, at your command line, make sure you have Node installed:
node -vYou'll also need either npm - which comes with Node automatically - or yarn:
yarn --versionNpm and yarn are Node package managers: they're the Composer for the Node world... and you can use either. If you decide to use yarn - thats what I'll use - make sure to install version 1.
We're about to install a new package... so let's commit everything:
git add .And... looks good:
git statusSo commit everything:
git commit -m "Look mom! A real app"To install Encore, run:
composer require encoreThis installs WebpackEncoreBundle. Remember, a bundle is a Symfony plugin. And this package has a recipe: a very important recipe. Run:
git statusOoh! For the first time, the recipe modified the .gitignore file. Let's go check that out. Open .gitignore. The stuff on top is what we originally had... and down here is the new stuff added by WebpackEncoreBundle. It's ignoring the node_modules/ directory, which is basically the vendor/ directory for Node. We don't need to commit that because those vendor libraries are described in another new file from the recipe: package.json. This is Node's composer.json file: it describes the Node packages that our app needs. The most important one is Webpack Encore itself, which is a Node library. It also has a few other package that will help us get our job done.
The recipe also added an assets/ directory... and a configuration file to control Webpack: webpack.config.js. The assets/ directory already holds a small set of files to get us started.
Ok, with Composer, if we didn't have this vendor/ directory, we could run composer install which would tell it to read the composer.json file and re-download all the packages into vendor/. The same thing happens with Node: we have a package.json file. To download this stuff, run:
yarn installOr:
npm installGo node go! This will take a few moments as it downloads everything. You'll probably get a few warnings like this, which are safe to ignore.
Great! This did two things. First, it downloaded a bunch of files into the node_modules/ directory: the "vendor" directory for Node. It also created a yarn.lock file... or package-lock.json if you're using npm. This serves the same purpose of composer.lock: it stores the exact versions of all the packages so that you get the same versions next time you install your dependencies.
For the most part, you don't need to worry about these lock files... except that you should commit them. Let's do that. Run:
git statusThen:
git add .Beautiful:
git statusAnd commit:
git commit -m "Adding Webpack Encore"Hey! Webpack Encore is now installed! But... it's not doing anything yet! Freeloader. Next, let's use it to take our JavaScript up to the next level.
when I use the composer require I get the following: composer require encore
In BaseIO.php line 134:
Your github oauth token for github.com contains invalid characters: "[token ]"
Hey Joet,
Hm, it sounds like you have problems with the Composer setup on your laptop. I bet you cannot install any Composer package, not only "encore", right? Could you try to install something else and confirm that you see the same error?
I think you should try to upgrade your Composer to the latest first. Then probably try to run "composer diagnose" to check the system and of everything is ok - try install that package again.
Cheers!
It didn't work for me, I'm using yarn v. 1.22.15 but I got the next message after calling both npm run watch or yarn watch:
Error: Encore.isRuntimeEnvironmentConfigured is not a recognized property or method.
Hey daniel,
That's odd. did you install @symfony/webpack-encore, double-check that your package.json and composer.json files matches to the tutorial's. If you debug the Encore variable inside your webpack.config.js file, what do you get?
Cheers!
It didn't worked for me: I got the next message when executing yarn watch:
`Error: Encore.isRuntimeEnvironmentConfigured is not a recognized property or method`.
// composer.json
{
"require": {
"php": ">=8.0.2",
"ext-ctype": "*",
"ext-iconv": "*",
"symfony/asset": "6.0.*", // v6.0.3
"symfony/console": "6.0.*", // v6.0.3
"symfony/dotenv": "6.0.*", // v6.0.3
"symfony/flex": "^2", // v2.1.5
"symfony/framework-bundle": "6.0.*", // v6.0.4
"symfony/monolog-bundle": "^3.0", // v3.7.1
"symfony/runtime": "6.0.*", // v6.0.3
"symfony/twig-bundle": "6.0.*", // v6.0.3
"symfony/ux-turbo": "^2.0", // v2.0.1
"symfony/webpack-encore-bundle": "^1.13", // v1.13.2
"symfony/yaml": "6.0.*", // v6.0.3
"twig/extra-bundle": "^2.12|^3.0", // v3.3.8
"twig/twig": "^2.12|^3.0" // v3.3.8
},
"require-dev": {
"symfony/debug-bundle": "6.0.*", // v6.0.3
"symfony/stopwatch": "6.0.*", // v6.0.3
"symfony/web-profiler-bundle": "6.0.*" // v6.0.3
}
}
Can't get past a yarn watch error.
package.json
Errors are:
If I manually add @babel then I get