Chapters

46 Chapters | 4:55:39 |

01

Symfony UX

5:34
02

Setting up Webpack Encore

5:11
03

encore watch & Code Splitting

4:06
04

Stimulus Controllers

5:53
05

Magic with Events, Properties & HTML from Ajax

4:43
06

Targets: Finding Elements

6:41
07

Actions: Listening to Events

4:43
08

Bootstrapping a "Color Selector" Form Element

9:06
09

Actions & currentTarget

6:41
10

Element.dataset

4:52
11

State in your Controller

6:26
12

The Values API

7:03
13

On Value Change Callback

8:07
14

Search Suggestions

5:49
15

Ajax with fetch(), Polyfills & async/await

5:24
16

HTML-Returning Ajax Endpoint

6:06
17

Stimulus Behaviors: stimulus-use

6:37
18

Form Submit Confirmation Controller

6:22
19

Making a Configurable, Reusable Controller

7:47
20

Multi Controller Communication

9:09
21

Listening to An Event From Another Controller

6:25
22

Ajax-Powered HTML Updates & a CSS Transition

5:13
23

Symfony UX & Chart.js

7:48
24

stimulus-bridge: How UX Packages Work

6:55
25

Extending a UX Controller

8:43
26

React (or Vue) ❤️ Stimulus

6:48
27

Pass Server Data Directly to React Props

7:02
28

Webpack Bundle Analyzer

4:58
29

Async/Dynamic import()

7:26
30

Magic: Lazy-Loading UX Controllers

5:13
31

Making your Custom Controllers Lazy

3:58
32

Product CRUD

7:42
33

Opening a Modal

8:14
34

Loading a Form into the Modal

8:46
35

Ajax-Submitting an Entire Form

6:25
36

Correcting the Form Action & Preventing Default

4:30
37

Ajax Form Response Status Codes

9:36
38

Ajax Element Reloading Controller

6:23
39

Dispatching an Event from modal-form

4:25
40

Reusing the "Reload Content" Controller

5:12
41

CSS Transitions with useTransition

7:05
42

CSS Transition Classes

5:03
43

Free 3rd Party Controllers!

4:31
44

Using the autocomplete-controller

9:45
45

Autocomplete with Transitions

6:08
46

useTransition in a Neat, Reusable Module

5:00

> JavaScript Frameworks & Tools > Symfony UX: Stimulus

Buy Access to Course

03.

encore watch & Code Splitting

|

Autoplay

Previous Challenge

Next Challenge

Login or register to check out the script

15 Comments

Sort By

Login or Register to join the conversation

jmsche 3 years ago

As Boostrap 5 was not released when the tutorial was published, running yarn add bootstrap now installs Bootstrap 5.
Now you have to run yarn add bootstrap@^4.6.2 so it installs Bootstrap 4, which is used by the project.

3 |

Victor SFCASTS jmsche 3 years ago

Hey Jmsche,

Yeah, I agree, good catch! We will add a note about it, thanks for mentioning it

Cheers!

|

Ryan-L 2 years ago edited

Changes to the app.css file are not loading.
Upon checking the page source,
<script src="/build/runtime.js" defer></script><script src="/build/app.js" defer></script>
is generated in the html, but nothing is generated for the css.

run npm watch gives me this error:
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find package '@babel/plugin-proposal-class-properties' imported from D:\Documents\Programming\ux-stimulus\babel-virtual-resolve-base.js

Edit: Found solution here: https://stackoverflow.com/questions/73324431/error-cannot-find-module-babel-plugin-proposal-class-properties
Ran this, and then run watch worked as intended: npm install --save-dev @babel/plugin-proposal-class-properties

2 |

weaverryan SFCASTS Ryan-L 2 years ago

Yo Ryan!

Other Ryan here. I'm not sure why you hit that and I didn't, but good debugging and thanks for sharing that 👍.

Cheers!

|

Tim-K 2 years ago

Hey,

I had a failure on yarn watch.

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

 ERROR  Failed to compile with 1 errors                                 12:34:03

 error  in ./assets/app.js                                              12:34:03

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find package '@babel/plugin-proposal-class-properties' imported from 
[...]

I solved this by running yarn add @babel/plugin-proposal-class-properties.

1 |

Victor SFCASTS Tim-K 2 years ago

Hey Tim,

Good catch on the solution, and thanks for confirming it works after adding that package. Not sure why that. I see that babel/plugin-proposal-class-properties package is installed in the finish code of the tutorial, probably you forgot to run yarn install at some point?

Cheers!

|

Macarena I. 5 years ago edited

Hi!, I have the next error! Please help!
`macarena@macarena-HP-Laptop-15-dw2xxx:~/marie$ yarn watch
yarn run v1.22.10
$ encore dev --watch
Running webpack ...

Error: Encore.enableStimulusBridge is not a recognized property or m ethod.

webpack.config.js:27 Object.<anonymous>
/home/macarena/marie/webpack.config.js:27:5

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

|

weaverryan SFCASTS Macarena I. 5 years ago edited

Hi Macarena I.!

Hmm. I'm not sure why you would be getting this, but I know the cause: your version of @symfony/webpack-encore is too old (it looks like you have a version from before the enableStimulusBridge() was added). Try running yarn upgrade "@symfony/webpack-encore" - you'll need at least version 0.32.0, but I'd highly recommend upgrading to the latest 1.4.

Let me know if that helps!

Cheers!

|

Macarena I. weaverryan 5 years ago

Yes!!!! It Works!!!! Thanks!

|

Michael H. 5 years ago

When doing this course on Windows, i had to manually download the core-js node_module because the yarn install would only download folders that have one readme.md file and nothing else. This only happened for core-js, all other modules where downloaded fine.

|

MolloKhan SFCASTS Michael H. 5 years ago

Ohh Windows... when will it behave as it should? Are you on WSL or just Windows?

|

Ondřej Frei 5 years ago

Hello, thank you for this amazing tutorial! One thing puzzles me though - why is it recommended to add the dependency on Bootstrap with the --dev flag? Wouldn't that mean that with prod dependencies only, webpack would fail to build it?

|

MolloKhan SFCASTS Ondřej Frei 5 years ago edited

Hey Ondřej Frei

That's a great question, in theory, the idea behind this is compiling your assets should be part of your deployment workflow and not rely on doing that directly on your production server, if you do that, then, you won't have to install Nodejs nor Yarn in your production server but that's up to you. You can move those assets to the non-dev key and it should not affect anything

Cheers!

|

Ondřej Frei MolloKhan 5 years ago edited

Thank you MolloKhan! So I suppose I just have too much of a composer-like view on it? Meaning that we only build the JS and do not run it on a node server, all of the dependencies could technically be --dev ones, because there is no "run" time?

|

MolloKhan SFCASTS Ondřej Frei 5 years ago edited

Yes, exactly, all the JS deps can be required as dev. On deploy, you only have to run yarn install and after that, you can forget everything about Yarn. As I said, if you have a CD server, you could compile your assets there and then copy the whole node_modules directory to the production server, this is great because the prod server won't have to install Nodejs and else.

1 |

This tutorial works perfectly with Stimulus 3!

Symfony 5.2 Stimulus 2

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "composer/package-versions-deprecated": "1.11.99.1", // 1.11.99.1
        "doctrine/annotations": "^1.0", // 1.11.1
        "doctrine/doctrine-bundle": "^2.2", // 2.2.3
        "doctrine/doctrine-migrations-bundle": "^3.0", // 3.0.2
        "doctrine/orm": "^2.8", // 2.8.1
        "phpdocumentor/reflection-docblock": "^5.2", // 5.2.2
        "sensio/framework-extra-bundle": "^5.6", // v5.6.1
        "symfony/asset": "5.2.*", // v5.2.3
        "symfony/console": "5.2.*", // v5.2.3
        "symfony/dotenv": "5.2.*", // v5.2.3
        "symfony/flex": "^1.3.1", // v1.21.6
        "symfony/form": "5.2.*", // v5.2.3
        "symfony/framework-bundle": "5.2.*", // v5.2.3
        "symfony/property-access": "5.2.*", // v5.2.3
        "symfony/property-info": "5.2.*", // v5.2.3
        "symfony/proxy-manager-bridge": "5.2.*", // v5.2.3
        "symfony/security-bundle": "5.2.*", // v5.2.3
        "symfony/serializer": "5.2.*", // v5.2.3
        "symfony/twig-bundle": "5.2.*", // v5.2.3
        "symfony/ux-chartjs": "^1.1", // v1.2.0
        "symfony/validator": "5.2.*", // v5.2.3
        "symfony/webpack-encore-bundle": "^1.9", // v1.11.1
        "symfony/yaml": "5.2.*", // v5.2.3
        "twig/extra-bundle": "^2.12|^3.0", // v3.2.1
        "twig/intl-extra": "^3.2", // v3.2.1
        "twig/twig": "^2.12|^3.0" // v3.2.1
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.0
        "symfony/debug-bundle": "^5.2", // v5.2.3
        "symfony/maker-bundle": "^1.27", // v1.30.0
        "symfony/monolog-bundle": "^3.0", // v3.6.0
        "symfony/stopwatch": "^5.2", // v5.2.3
        "symfony/var-dumper": "^5.2", // v5.2.3
        "symfony/web-profiler-bundle": "^5.2" // v5.2.3
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@babel/preset-react": "^7.0.0", // 7.12.13
        "@popperjs/core": "^2.9.1", // 2.9.1
        "@symfony/stimulus-bridge": "^2.0.0", // 2.1.0
        "@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets", // 1.1.0
        "@symfony/webpack-encore": "^1.0.0", // 1.0.4
        "bootstrap": "^5.0.0-beta2", // 5.0.0-beta2
        "core-js": "^3.0.0", // 3.8.3
        "jquery": "^3.6.0", // 3.6.0
        "react": "^17.0.1", // 17.0.1
        "react-dom": "^17.0.1", // 17.0.1
        "regenerator-runtime": "^0.13.2", // 0.13.7
        "stimulus": "^2.0.0", // 2.0.0
        "stimulus-autocomplete": "^2.0.1-phylor-6095f2a9", // 2.0.1-phylor-6095f2a9
        "stimulus-use": "^0.24.0-1", // 0.24.0-1
        "sweetalert2": "^10.13.0", // 10.14.0
        "webpack-bundle-analyzer": "^4.4.0", // 4.4.0
        "webpack-notifier": "^1.6.0" // 1.13.0
    }
}

Previous Challenge

Next Challenge