Chapters

57 Chapters | 6:19:46 |

01

Turbo: Drive, Frames & Streams!

5:03
02

Installing Turbo

3:41
03

How Turbo Drive Works

9:37
04

Turbo-Friendly JavaScript

6:56
05

The "defer" Attribute & Conditionally Activating Turbo

4:02
06

Form 422 Status & renderForm()

9:05
07

Form Submits & The Preview Feature

7:06
08

The Problem of Snapshots & JavaScript Popups

9:46
09

Cleanup Before Snapshotting (e.g. Modals)

6:03
10

Fixing the Sweetalert Modal

7:14
11

Organizing our Turbo Events Code

3:12
12

3rd Party JavaScript Widgets

7:52
13

Fixing External JS + Analytics Code

8:46
14

Reloading When JS/CSS Changes

6:52
15

Manual Visits with Turbo

5:04
16

CSS Page Transitions

7:24
17

Polished CSS Transitions

8:58
18

Prefetching the Next Page

5:19
19

<link rel="prefetch">

7:37
20

Turbo Frames: Lazy Frames

6:32
21

Turbo Frames Look for & Load the Matching Frame

4:24
22

Using a Full HTML Page to Populate a Frame

7:24
23

Reliably Load External JS with Stimulus

9:57
24

Targeting Links in or out of the Frame

5:00
25

Adding a "Read More" Ajax Frame

8:02
26

Frame Loading Animations

7:45
27

Review this Product... in a turbo-frame!

7:50
28

Globally Disable Buttons on Form Submit

5:50
29

Frame-Powered Inline Editing

6:45
30

Frames & Form "action" Attributes

7:45
31

Frame Redirecting & Dynamic Frame Targets

6:21
32

turbo-frame inside a Modal

7:06
33

Lazy Modal & Big Cleanup

4:59
34

Close the Modal after turbo-frame Success

6:17
35

Prevent a turbo-frame from Rendering

6:34
36

Full Page Redirect from a Frame

6:05
37

Redirecting the Full Page from a Frame

5:14
38

Frame Redirecting and Clearing the Snapshot Cache

6:51
39

Manual "Restore" Visit

8:11
40

Adding a Custom Request Header Based on the Frame

7:02
41

Smart Frame Redirecting with the Server

6:29
42

Automatically Redirect Ajax Calls to /login

5:14
43

Turbo Streams

8:01
44

Streams: Reusing Templates

4:37
45

Multiple Updates in one Stream

7:00
46

Processing Streams by Hand for Fun & Profit

5:18
47

Mercure: Pushing Stream Updates Async

4:43
48

Running the Mercure Service in the symfony Binary

4:28
49

Listening & Publishing

5:42
50

Mercure Hub's JWT Authorization

6:58
51

Publishing Mercure Updates in PHP

3:47
52

Turbo Stream for Instant Review Update

8:50
53

Smartly Updating Elements for all Users

7:06
54

Visually Highlighting new Items that Pop onto the Page

5:26
55

Entity Broadcast

7:02
56

Broadcasting Frontend Changes on Entity Update/Remove

7:28
57

Toast Notifications

10:14

> JavaScript Frameworks & Tools > Symfony UX: Turbo

Buy Access to Course

50.

Mercure Hub's JWT Authorization

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Challenge

Next Challenge

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

6 Comments

Sort By

Login or Register to join the conversation

john-erney-rojas 9 months ago

I got an Authorization issue using turbo_stream_listen with withCredentials to connect a private hub in production.

An exception has been thrown during the rendering of a template ("Unable to create authorization cookie for a hub on the different second-level domain mercure.fake-domain.com".") in "admin/page/email-edit-body.html.twig at line 25.

my code:
<div {{ turbo_stream_listen('email_preview', 'default',{ withCredentials: true }) }}></div>

I create a temporary solution to inject the token, find the code in my comment at

I hope this helps anyone while this is fixed directly into turbo_stream_listen

|

kbond SFCASTS john-erney-rojas 9 months ago edited

Hey @john-erney-rojas!

Thanks for providing the work-around. Hopefully the problem gets revealed in that issue!

--Kevin

1 |

Sucram 2 years ago

Hi, I'm wondering about the template function turbo_stream_listen and authorization.
I have not set the anonymous directive within the mercure config.

The php publish method is using the configured jwt and the message is published. Whereas on the listening part I always get a 401 Unauthorized as soon as the EventSource wants to connect.

I have checked the stimulus controller within the ux-turbo package but I found only this connect method:

    connect() {
        if (this.url) {
            this.es = new EventSource(this.url);
            connectStreamSource(this.es);
        }
    }

and I'm wondering where the jwt stuff is handled for subscribing to topics?

|

weaverryan SFCASTS Sucram 1 year ago edited

Hey @Sucram!

It's been awhile since I've looked a this, but, indeed, this little bit might be missing. https://github.com/symfony/ux/issues/291 looks related.

Cheers and sorry I can't give you a better answer!

Ryan

|

MGDSoft 2 years ago

first of all, thanks for these great videos Ryan!

for me doesn't work as only simple DIV

<div {{ turbo_stream_listen('product-reviews') }}></div>

I had to create an internal child div to replace it

<div {{ turbo_stream_listen('product-reviews') }}>
     <div id="FOO"></div>
</div>

with the following mercure message

// topic product-reviews
<turbo-stream action="update" target="FOO"><template>asdddddddddddddddasdasdasd</template></turbo-stream>

|

weaverryan SFCASTS MGDSoft 2 years ago

Hey @MGDSoft!

Hmm. Ok, so this DOES make sense. This line can be a bit misleading:

<div {{ turbo_stream_listen('product-reviews') }}>

This line basically says:

I want some JavaScript that is listening to the "product-reviews" Mercure topic for "stream" updates.

The weird thing about this line is that it doesn't affect the div it's attached to at all. You could put this anywhere on the page: it's just a directive to "globally listen" to that topic.

So, now you are listening to the product-reviews Mercure topic for updates. So, in your code, you can now post an "update" to Mercure containing Turbo Stream directions to update any elements on your page (at this point, it doesn't matter at all what original element you added the {{ turbo_stream_listen('product-reviews') }} to. So, when you return this:

// topic product-reviews
<turbo-stream action="update" target="FOO"><template>asdddddddddddddddasdasdasd</template></turbo-stream>

That will tell the JavaScript on your page that is listening to the product-reviews channel to find the id="foo" element and update the contents. The fact that this JavaScript is running thanks to being attached to its parent <div> makes no differences at this point.

Does that help? Or does it confuse more :p?

Cheers!

|

Symfony 5.2 Turbo 1.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.13.1
        "doctrine/doctrine-bundle": "^2.2", // 2.3.2
        "doctrine/orm": "^2.8", // 2.9.1
        "phpdocumentor/reflection-docblock": "^5.2", // 5.2.2
        "sensio/framework-extra-bundle": "^6.1", // v6.1.4
        "symfony/asset": "5.3.*", // v5.3.0-RC1
        "symfony/console": "5.3.*", // v5.3.0-RC1
        "symfony/dotenv": "5.3.*", // v5.3.0-RC1
        "symfony/flex": "^1.3.1", // v1.21.6
        "symfony/form": "5.3.*", // v5.3.0-RC1
        "symfony/framework-bundle": "5.3.*", // v5.3.0-RC1
        "symfony/property-access": "5.3.*", // v5.3.0-RC1
        "symfony/property-info": "5.3.*", // v5.3.0-RC1
        "symfony/proxy-manager-bridge": "5.3.*", // v5.3.0-RC1
        "symfony/runtime": "5.3.*", // v5.3.0-RC1
        "symfony/security-bundle": "5.3.*", // v5.3.0-RC1
        "symfony/serializer": "5.3.*", // v5.3.0-RC1
        "symfony/twig-bundle": "5.3.*", // v5.3.0-RC1
        "symfony/ux-chartjs": "^1.1", // v1.3.0
        "symfony/ux-turbo": "^1.3", // v1.3.0
        "symfony/ux-turbo-mercure": "^1.3", // v1.3.0
        "symfony/validator": "5.3.*", // v5.3.0-RC1
        "symfony/webpack-encore-bundle": "^1.9", // v1.11.2
        "symfony/yaml": "5.3.*", // v5.3.0-RC1
        "twig/extra-bundle": "^2.12|^3.0", // v3.3.1
        "twig/intl-extra": "^3.2", // v3.3.0
        "twig/string-extra": "^3.3", // v3.3.1
        "twig/twig": "^2.12|^3.0" // v3.3.2
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.0
        "symfony/debug-bundle": "^5.2", // v5.3.0-RC1
        "symfony/maker-bundle": "^1.27", // v1.31.1
        "symfony/monolog-bundle": "^3.0", // v3.7.0
        "symfony/stopwatch": "^5.2", // v5.3.0-RC1
        "symfony/var-dumper": "^5.2", // v5.3.0-RC1
        "symfony/web-profiler-bundle": "^5.2", // v5.3.0-RC1
        "zenstruck/foundry": "^1.10" // v1.10.0
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@babel/preset-react": "^7.0.0", // 7.13.13
        "@fortawesome/fontawesome-free": "^5.15.3", // 5.15.3
        "@hotwired/turbo": "^7.0.0-beta.5", // 1.2.6
        "@popperjs/core": "^2.9.1", // 2.9.2
        "@symfony/stimulus-bridge": "^2.0.0", // 2.1.0
        "@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets", // 1.1.0
        "@symfony/ux-turbo": "file:vendor/symfony/ux-turbo/Resources/assets", // 0.1.0
        "@symfony/ux-turbo-mercure": "file:vendor/symfony/ux-turbo-mercure/Resources/assets", // 0.1.0
        "@symfony/webpack-encore": "^1.0.0", // 1.3.0
        "bootstrap": "^5.0.0-beta2", // 5.0.1
        "chart.js": "^2.9.4",
        "core-js": "^3.0.0", // 3.13.0
        "jquery": "^3.6.0", // 3.6.0
        "react": "^17.0.1", // 17.0.2
        "react-dom": "^17.0.1", // 17.0.2
        "regenerator-runtime": "^0.13.2", // 0.13.7
        "stimulus": "^2.0.0", // 2.0.0
        "stimulus-autocomplete": "https://github.com/weaverryan/stimulus-autocomplete#toggle-event-always-dist", // 2.0.0
        "stimulus-use": "^0.24.0-1", // 0.24.0-2
        "sweetalert2": "^11.0.8", // 11.0.12
        "webpack-bundle-analyzer": "^4.4.0", // 4.4.2
        "webpack-notifier": "^1.6.0" // 1.13.0
    }
}

Previous Challenge

Next Challenge