Chapters

21 Chapters | 2:23:48 |

01

Hello Symfony

6:13
02

Meet our Tiny App

5:13
03

Routes, Controllers & Responses

8:24
04

Wildcard Routes

7:46
05

Symfony Flex: Aliases, Packs & Recipes

8:50
06

Flex Recipes

7:51
07

Twig ❤️

6:05
08

Twig Inheritance

8:02
09

Profiler: Your Debugging Best Friend

7:28
10

Assets, CSS, Images, etc

10:36
11

Generate Urls & bin/console

7:57
12

JSON API Endpoint

4:58
13

Smart Routes: GET-only & Validate {Wildcards}

4:56
14

Service Objects

5:38
15

The Twig Service & Profiler for API Requests

6:04
16

Setting up Webpack Encore

5:12
17

Packaging JS and CSS with Encore

6:05
18

Installing 3rd Party Code into our JS/CSS

5:51
19

Stimulus: Sensible, Beautiful JavaScript

5:01
20

Real-World Stimulus Example

8:50
21

Turbo: Supercharge your App

6:46

> Symfony 6 > Harmonious Development with Symfony 6

Buy Access to Course

16.

Setting up Webpack Encore

|

|

Autoplay

Previous Chapter

Next Chapter

Login or register to check out the script

16 Comments

Sort By

Login or Register to join the conversation

Doston-A 11 months ago

For who can not install node js moduls , change Symfony lock file Encore to v:2 , and composer req encore and composer require symfony/stimulus-bundle , after that npm install or yarn install . And read composer error feedbacks i will help you very strong.
maybe it will help someone to future :)

|

Victor SFCASTS Doston-A 11 months ago

Hey Doston,

Thanks for this tip! We're using symfony/webpack-encore-bundle v1 in this course, v2 may slightly differ from what we're showing in videos.

Also, if you even have any problems following our tutorials - feel free to ask for a help in the comments section and our support team will help you.

Cheers!

|

Digital-Pig 1 year ago

What? Webpack, seriously?!
Webpack has nothing to do with writing professional CSS and JavaScript, and stating so just confuses a user about what webpack is. So, before webpack we didn't write professional CSS & JavaScript? When your audience is this large you need an editor, someone who will tell you to stop talking lala!

I don't use webpack because unless you understand webpack strategies, you'll end up loading JS and CSS files for pages that don't even use them. Or worse still, you'll end up loading ALL you CSS and JS on every page load.

Do yourself a favor, write 3 functions: injectCSS, injectJS, and injectFiles. Use the first 2 to store references to files you need and call them from functions or controller constructors. The last method gets called before your page is rendered and puts the files where they need to be, wrapped in the correct loader tags...you will only ever load the files you need when you need them.

Webpack is used by people who drives cars both don't know how to change the oil...get under the hood and learn something.

|

weaverryan SFCASTS Digital-Pig 1 year ago edited

Hey @Digital-Pig!

You are totally right! This tutorial is a few years old now, which is why it includes Encore. In our Symfony 7 tutorial, we use AssetMapper: a way to be able to write modern JavaScript with zero build system. A refreshing "back to basics", for sure.

I hope that gives you some context about why Webpack was included here a few years ago: it was (debatably) a necessary evil. And now we've gotten rid of it! 🥳

Cheers!

|

Dang 3 years ago

Hi guys,
I set up a starter project using bootstrap and 1 file scss (app.scss)Then any time I changed app.scss, the yarn run dev-server take too much long, about 3.8 ~ 4 second for compiling.
Then, I realize that, if I remove the @import "~bootstrap/scss/bootstrap"; now is fast.
Or, if I change app.scss to app.css and @import "~bootstrap , it's also fast, just about 100 ms.
So, shortly say:

scss alone -> fast
css + bootstrap -> fast
scss + bootstrap -> problem.
Here is my app.scss:
```
@import "~bootstrap/scss/bootstrap";
html, body{
 height: 100%;
}
h3{
 color:blue;
}
```
Is there any one face the same issue? I don't know where this problem came from, my webpack.config.js have .enableSassLoader() and there's nothing special with it.

|

sadikoff Dang 3 years ago

Hi @Dang,

Honestly it's not a problem, you just compiling complete Bootstrap library which is pretty massive inside. So lets check your examples one by one

scss alone - there is only your scss code which is really small and fast to compile
css + bootstrap - if your main file is css then compiler will select precompiled BS library, and it will be faster because you will not compile everything
SCSS + boostrap - here you will compile everything so literally your scss code, and all bootstrap scss code with all mixins and everything included that's why it will be slow

Basically if you want to use scss bootstrap you need to include only what you really need so it can be compiled faster and be lighter =)

Cheers!

|

Dang sadikoff 3 years ago

Hi @sadikoff,
Thank you for pointing out the reason. I did change my app.scss to import the bootstrap css instead. @import "~bootstrap/dist/css/bootstrap.min.css"; . Webpack not compile the bootstrap so it's fast as expected. Then, I tried your method to import only some parts bootstrap scss that the page need. It works and reduce the time, but still. Because to make that simple page works as before, I have also to import many modules such as functions, variables, form, button, container ... And with hot reload, the latency still not make me happy :)).
So I would like to know if there are a way in Webpack, we can ignore the compile process for bootstrap scss? Or maybe compiling it only one time with cache ... ?

|

sadikoff Dang 3 years ago

Sorry, but the only way to ignore bootstrap compiling is using precompiled css file. However IIRC webpack should have internal cache to speedup process, but I can't say if it works properly with bootstrap.

So as for me the only solution is for example on active development stage if you don't need to modify bootstrap styles is to use precompiled bootstrap css file

Cheers!

|

red_smeg 3 years ago

Can't get past a yarn watch error.

package.json

{
    "devDependencies": {
        "@hotwired/stimulus": "^3.0.0",
        "@popperjs/core": "^2.10.2",
        "@symfony/stimulus-bridge": "^3.0.0",
        "@symfony/webpack-encore": "^4.1.1",
        "axios": "^0.24.0",
        "bootstrap": "^5.0.0",
        "core-js": "^3.0.0",
        "jquery": "^3.6.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"
    }
}

Errors are:

❯ yarn install
yarn install v1.22.19
[1/4] 🔍  Resolving packages...
warning @symfony/webpack-encore > css-minimizer-webpack-plugin > cssnano > cssnano-preset-default > postcss-svgo > svgo > stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @symfony/webpack-encore@4.1.2" has unmet peer dependency "@babel/core@^7.17.0".
warning " > @symfony/webpack-encore@4.1.2" has unmet peer dependency "@babel/preset-env@^7.16.0".
warning " > @symfony/webpack-encore@4.1.2" has unmet peer dependency "webpack@^5.72".
warning " > @symfony/webpack-encore@4.1.2" has unmet peer dependency "webpack-cli@^4.9.1".
warning "@symfony/webpack-encore > babel-loader@8.3.0" has unmet peer dependency "@babel/core@^7.0.0".
warning "@symfony/webpack-encore > babel-loader@8.3.0" has unmet peer dependency "webpack@>=2".
warning "@symfony/webpack-encore > css-loader@6.7.2" has unmet peer dependency "webpack@^5.0.0".
warning "@symfony/webpack-encore > mini-css-extract-plugin@2.7.0" has unmet peer dependency "webpack@^5.0.0".
warning "@symfony/webpack-encore > terser-webpack-plugin@5.3.6" has unmet peer dependency "webpack@^5.1.0".
warning "@symfony/webpack-encore > webpack-dev-server@4.11.1" has unmet peer dependency "webpack@^4.37.0 || ^5.0.0".
warning "@symfony/webpack-encore > @nuxt/friendly-errors-webpack-plugin@2.5.2" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0".
warning "@symfony/webpack-encore > css-minimizer-webpack-plugin@4.2.2" has unmet peer dependency "webpack@^5.0.0".
warning "@symfony/webpack-encore > assets-webpack-plugin@7.0.0" has unmet peer dependency "webpack@>=5.0.0".
warning "@symfony/webpack-encore > clean-webpack-plugin@4.0.0" has unmet peer dependency "webpack@>=4.0.0 <6.0.0".
warning "@symfony/webpack-encore > style-loader@3.3.1" has unmet peer dependency "webpack@^5.0.0".
warning "@symfony/webpack-encore > webpack-dev-server > webpack-dev-middleware@5.3.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 22.07s.
❯ yarn watch
yarn run v1.22.19
$ encore dev --watch
node:internal/modules/cjs/loader:1029
  throw err;
  ^

Error: Cannot find module '@babel/core'
Require stack:
- /Users/markbateman/Documents/github/nc.ai.com/node_modules/@symfony/webpack-encore/lib/config/parse-runtime.js
- /Users/markbateman/Documents/github/nc.ai.com/node_modules/@symfony/webpack-encore/bin/encore.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1026:15)
    at Module._load (node:internal/modules/cjs/loader:872:27)
    at Module.require (node:internal/modules/cjs/loader:1092:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/Users/markbateman/Documents/github/nc.ai.com/node_modules/@symfony/webpack-encore/lib/config/parse-runtime.js:15:15)
    at Module._compile (node:internal/modules/cjs/loader:1205:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1259:10)
    at Module.load (node:internal/modules/cjs/loader:1068:32)
    at Module._load (node:internal/modules/cjs/loader:909:12)
    at Module.require (node:internal/modules/cjs/loader:1092:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/markbateman/Documents/github/nc.ai.com/node_modules/@symfony/webpack-encore/lib/config/parse-runtime.js',
    '/Users/markbateman/Documents/github/nc.ai.com/node_modules/@symfony/webpack-encore/bin/encore.js'
  ]
}

Node.js v19.1.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

If I manually add @babel then I get

❯  yarn watch
yarn run v1.22.19
$ encore dev --watch
Running webpack ...

node:internal/modules/cjs/loader:1029
  throw err;
  ^

Error: Cannot find module 'webpack/bin/webpack'
Require stack:
- /Users/markbateman/Documents/github/nc.ai.com/node_modules/@symfony/webpack-encore/bin/encore.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1026:15)
    at Module._load (node:internal/modules/cjs/loader:872:27)
    at Module.require (node:internal/modules/cjs/loader:1092:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/Users/markbateman/Documents/github/nc.ai.com/node_modules/@symfony/webpack-encore/bin/encore.js:69:12)
    at Module._compile (node:internal/modules/cjs/loader:1205:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1259:10)
    at Module.load (node:internal/modules/cjs/loader:1068:32)
    at Module._load (node:internal/modules/cjs/loader:909:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:82:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/markbateman/Documents/github/nc.ai.com/node_modules/@symfony/webpack-encore/bin/encore.js'
  ]
}

Node.js v19.1.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

|

Joel-T 3 years ago edited

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 ]"

|

Victor SFCASTS Joel-T 3 years ago edited

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!

|

Daniel R. 4 years ago

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.

|

MolloKhan SFCASTS Daniel R. 4 years ago edited

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!

|

Antirixas MolloKhan 3 years ago

Sorry, very very new to all of this, how does one debug the Encore variable?

|

MolloKhan SFCASTS Antirixas 3 years ago edited

Hey @Antirixas

Inside your webpack.config file, write console.log(Encore.isProduction() to see if it's running in production mode, or, you can print the whole config like this console.log(Encore.getWebpackConfig(). You need to run webpack after each change

Cheers!

|

Daniel R. 4 years ago

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`.

|

Symfony 6

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.1",
        "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.4.5
        "symfony/framework-bundle": "6.0.*", // v6.0.4
        "symfony/monolog-bundle": "^3.0", // v3.7.1
        "symfony/runtime": "6.4.3", // v6.4.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
    }
}

Previous Chapter

Next Chapter