Chapters

20 Chapters | 1:53:05 |

01

Setting up our Symfony App

4:34
02

Getting to Know our Tiny Project

4:14
03

Routes, Controllers & Responses

6:17
04

Magical Flex Recipes

5:40
05

Twig & Templates

8:12
06

Twig Template Inheritance

3:50
07

Debugging with the Amazing Profiler

4:28
08

Creating JSON API Endpoints

7:17
09

Services: The Backbone of Everything

7:47
10

Creating your own Service

7:04
11

Fancier Routes: Requirements, Wildcards, and More

6:56
12

Generating URLs

5:31
13

CSS & JavaScript with Asset Mapper

6:17
14

Tailwind CSS

6:15
15

Twig Partials & for Loops

2:44
16

PHP Enums

3:30
17

Smart Model Methods & Making the Design Dynamic

4:44
18

Stimulus: Writing Pro JavaScript

8:00
19

Turbo: Your Single Page App

4:32
20

Maker Bundle: Let's Generate Some Code!

5:13

> Symfony > Cosmic Coding with Symfony 7

Buy Access to Course

18.

Stimulus: Writing Pro JavaScript

|

|

Autoplay

Previous Challenge

Next Chapter

Login or register to check out the script

26 Comments

Sort By

Login or Register to join the conversation

symfonyace 5 months ago edited

Nice and very interesting tutorial.
One question, how do you bring back the aside part of the page after hiding it ?
In the video, you click the arrow button once to trigger the closeable#close method, and then looks like you click again the screen to bring back the aside div. I'm doing so to not avail or am I missing something ?

BTW, how is doing Ryan ?

|

Victor SFCASTS symfonyace 5 months ago edited

Hey @symfonyace ,

Yeah, good question, because it's probably not very clear from the video. Actually, Ryan just reloads the page after the sidebar is gone i.e. he clicks the button, the sidebar is animated and removed completely, then he reloads the page in the browser (presses a shortcut like Cmd + R on a Mac to reload the page) that loads a new HTML page again with the sidebar, and finally clicks the button again to remove the sidebar. And so on, just super simple and no magic ;)

Thank you for asking about Ryan! Unfortunately, Ryan passed away last year. You can read the related blog post about him here: https://symfonycasts.com/blog/remembering-ryan-weaver

Cheers!

|

Kay 5 months ago

I am trying to follow this course in 2026, and I do not see the _shipStatusAside.html.twig. What am I missing? This is very hard to follow to be honest.

|

Kay Kay 5 months ago

Update: I found the "aside" element in homepage.html.twig and was able to continue the video.

Also, let me just add that not everybody is using PHPStorm. I am using VSCode and not all that functionality you show off is available here. I feel like this course should focus on purely Symfony and not utilize some features PHPStorm includes. I get it: it is the defacto IDE for PHP. Just know that some of us just learning Symfony did not pay for PHPStorm and are using freely available resources instead. And I had to heavily add extensions to VSCode to even follow this course from the beginning. Just letting my voice heard.

1 |

Victor SFCASTS Kay 5 months ago

Hey Kay,

I'm happy to see you were able to find that youself, good job!

Thank you for your interest in SymfonyCasts tutorials! Yes, you're totally right, not all devs use PhpStorm for their own reasons, also it's just a matter of taste too. Though we would like to recommend it as the best IDE for PHP and Symfony projects. We're trying to avoid using specific PhpStorm features unless it helps to save some time in the video, and when users should be clear enough on how to do that manually. We constantly try to keep it in mind, and I believe you should not encounter such moments in the tutorials very often.

Anyway, thanks again for reminding that, we appreciate it. And I agree with you on this. If you ever have any problems following our tutorials - please, feel free to ask your questions in the comments section below the video and our support team will help you :)

Cheers!

1 |

Jan-Makarewicz Victor 3 months ago

Hi Victor.. I will admit of joining the discussion about the IDEs.. I just have an idea - I totally understand the point that you in SymfonyCasts are using PHPStorm (thanks God not vim :D) and totally no point in changing that, - but maybe SymfonyCasts authors from now on could check out VSCode as it is free (well.. better probably, VSCodium, the Free as in Freedom, not as in a free beer, and Open - the source code for "core" VSCode is theoretically open-sourced but the binary build is a bit different, quite hard to explain in short time, I will rather recommend to read about it online [ https://medium.com/gopypi/issues-with-vscode-license-you-should-worry-fdb784796b6d ] - unfortunately it seems that VSCode and it's open source forks are not 100%-compatible) and then in the upcoming series just shortly explain, how to perform some PHPStorm-specific code edit / generation actions in VSCodium?

Or, maybe a one-shot/some short series like "VScode/VSCodium for PHP Geeks"?

Also, it is worth checking out, probably some of SF subscribers/watchers are collage students, - as far as I know, there is a discount for students for Jetbrains family tools? Would be worth mentioning somewhere, maybe folks do not know this.

Regardless, SymfonyCasts is amazing, and you can even use Vim (well, honestly, Vim IS brilliant.. just maybe not for everyone/it HAS a big learning curve :D ) I will continue to watch it, as Ryan did a great job, let's simply say his unconventional talent as a tutor and a teacher made me interested in coming back to learn Symfony.. His death is such a loss for all programming community, I believe.. I just hope Kevin and other SF authors (Leanna's tutorials are also amazing) will try to tread in His footsteps..

|

Victor SFCASTS Jan-Makarewicz 3 months ago

Hey Jan-Makar,

Thank you for your interest in SymfonyCasts tutorials! ♥️

We have a lot of discussions internally about IDE, and we're constantly trying to improve our educational path in videos to make it as smooth as possible for our users. All you said definitely makes sense, and I agree on it. Many cool devs indeed use other IDEs (or even VIM that is still crazy for me :) ), that's just a matter of taste, devs may just get used to specific tools and use them for years, or just a price issue. In our tutorials, we're mostly focusing on writing code and use very little hotkeys and features so that the users who follow our courses on a different IDE may not be too confused. And even when we use some tricks like implementing methods etc - we make it clear so that people could just type them instead of using the auto-generation feature from IDE. But once again, it's usually very rarely when we do it.

Your "VScode/VSCodium for PHP Geeks" indeed sounds like a good course, we have a course about PhpStorm btw: https://symfonycasts.com/screencast/phpstorm - similar about VScode/VSCodium would be cool to have too. Though I can't say when it may happen, because all our team members indeed use PhpStorm for personal use also, and it's indeed one of the best IDE you can find for PHP, and with the Symfony plugin, I think it's probably the best one for Symfony.

We would like to stick to PhpStorm for our future tutorials as well, just to keep videos consistent. And changing it have little sense fairly speaking, first of all, because I think most of the devs still use PhpStorm if we changed it to VSCode, for example, VSCode guys would be happy, but PhpStorm guys will write to us the same :) So, considering facts I mentioned above, we're trying to very little features of the IDE during the code to do not overcomplicate and better focus on the topics we're learning in the course.

Btw, yes, PhpStorm has discounts for students, and I think it's pretty clear on the pricing page when you look for a license. Actually, they have many "Special Offers" for their licenses so I would recommend you to check them, maybe you fit for a category there. And even if nothing fits, a little-known fact but PhpStorm has EAP (early access program) that allows you to use the latest beta version of PhpStorm just literally free - you can check it here: https://www.jetbrains.com/phpstorm/nextversion/ . So I think it still should be pretty much accessible for all types of users.

I hope that helps! And thank you for your understanding! :)

Cheers!

|

Kay Victor 5 months ago

OMG! I just realized that for some reason, I jumped ahead to chapter 18 instead of doing chapter 15! Idk how that happened, I'm so sorry. I was just following along the track and it landed me on Chapter 18, and I didn't check!

You ARE creating that partial twig file in Chapter 15 that I was kinda missing in this video. Urgh!!! Again, I'm so sorry.

|

Victor SFCASTS Kay 5 months ago

Hey Kay,

Oh, no problem! That may happen if you open that Ch18 in a new tab and play the video, then the system could return you back to that chapter when you ocntinue the course. Or it was just an accidental click that may happen too. Anyway, I'm glad to hear you're back on the right path ;)

If you ever have any questions following our tutorials - please, just ask!

Cheers!

|

Kay Victor 5 months ago

Much appreciated. Thanks!

|

Himanshu 1 year ago edited

Any help your side sockets io how to use in symfony how to install example npm install express@4

|

Victor SFCASTS Himanshu 1 year ago

Hey Himanshu,

If you're talking about web sockets - we have a few screencasts about Mercure Symfony component, kind of like web sockets but cooler :) You can check them here: https://symfonycasts.com/search?q=mercure&sort=most relevant&types[]=video - you can leverage our advanced search on SymfonyCasts to find more content related to a specific stack. Unfortunately, no content about express@4.

I hope it helps!

Cheers!

|

rom 1 year ago edited

The preload option is now obsoleted in importmap.php file on the version 7.2 of Symfony ?
It’s no longer mentioned in the multi-line comment.

|

Victor SFCASTS rom 1 year ago

Hey Rom,

I don't see we use that on this tutorial, or am I missing something? If so, please, could you link me to the correct chapter? Also, could you tell me what exactly deprecation message do you see about that preload option? Or do you mean it's gone from the recipe now? If so, IIRC that should be enabled by default now, you can check the source HTML code to see it includes preload. If not, you can always enable it manually in the importmap youself.

Cheers!

|

John-S 1 year ago

Honestly, I feel that there is a bit too much info for introduction tutorial. Enum, stimulus, tailwind... zis is all a bit overwhelming.

|

MolloKhan SFCASTS John-S 1 year ago edited

Hey @John-S

Thank you for your feedback and I agree with you, all of this can be too much. By the way, we have a dedicated tutorial for Stimulus and Symfony UX https://symfonycasts.com/screencast/stimulus

Cheers!

|

pasquale_pellicani 2 years ago

first of all thank you for these fabulous and very precious courses for those like me who want to learn more, I have a question (perhaps I have already asked it in another post) but a few months ago I remember that you had published a recent video course regarding the concept of asset manager which seemed be the last frontier by putting stimulus and turbo on the bench, am I remembering correctly? My memory recalls the confetti script example. If I don't remember correctly, I ask for forgiveness. I would like to understand, nowadays what is the best method to manage attractive and latest generation UX? Thanks for all ;)

|

Victor SFCASTS pasquale_pellicani 2 years ago edited

Hey @pasquale_pellicani ,

It depends on your needs, the project, and your knowledge. We do recommend Stimulus/Turbo as it's a straightforward tool with a nice Symfony integration. This is just ideal if you have a server-side project and want to give it a feeling of single-page application. It's ideal if you're OK with rendering templates server-side and let Stimulus handle it for you. In short, you just need to understand Stimulus, it's basic idea and how it works. For this - we do recommend you to watch this Stimulus course :)

But if Stilulus isn't enough for your needs, i.e. if you need more complex UI, if you want to render UI client-side without sending AJAX requests to the server and get already rendered template response that Stimulus just insert into the page for you - then take a look at more serious UI frameworks like VueJS, or React/Angular for example. They all are kinda good, and if you already know something well - probably better to use that as you will spend more time on developing instead of learning and fixing some edge cases when you start with a completely new technology for you.

So that's my personal opinion on it. In. short, if Stimulus and Turbo is enough for you - great, definitely go with it. If not - look at something more serious and focused on client-side rendering like Vue/React/Angular.

I hope that helps!

Cheers!

1 |

pasquale_pellicani Victor 2 years ago edited

thanks you always come for the precious answers @Victor , so what do I do? Am I waiting for a reactJs + Symfony video course? ;)

|

Victor SFCASTS pasquale_pellicani 2 years ago edited

Hey @pasquale_pellicani ,

Haha, we're mostly leaning towards VueJS instead of ReactJS, and we do have some screencasts about it here:

We will definitely want to record more Vue-related content but I don't know when it might be released, we're busy with other good topics lately.

About ReactJS, we worked with it before, and even have a course: https://symfonycasts.com/screencast/reactjs - but then we re-wrote that part of the system with Stimulus instead. and it works great in our specific case :)

Cheers!

1 |

pasquale_pellicani Victor 2 years ago edited

So, why would one choose Vue or React or stimulus? What do you think the choice is based on?
Is this the most recent guide on the stimulus/turbo topic? Or are there more recent ones?
thanks

|

Victor SFCASTS pasquale_pellicani 2 years ago edited

Hey @pasquale_pellicani ,

That https://symfonycasts.com/screencast/last-stack course is the latest indeed, but it includes more topics besides Stimulus & Turbo. If you're looking for a Stimulus and Turbo course in more details, I would recommend you to watch this topic-specific courses:

Vue or React or stimulus?

Well, first of all, Stimulus is not the same as Vue/React, so technically the difference is the same I mentioned above. If you're looking for client-side UI rendering - take a look at Vue/React. If you're OK with rendering UI server-side - Stimulus might be enough for you, it will help you dynamically inject. already server-side rendered templates into the page via AJAX requests.

So if simplify that to "Vue or React"? Well, simply, a matter of taste mostly. Something gets more hipster with a new release, etc. Sometimes people start working with something and so are already familiar with the technology and it makes sense to continue working with it while it's doing the job for you. On the more technical level and limitations - you probably first should get familiar with both technologies so that you could make some conclusions yourself.

I hope that helps!

Cheers!

|

Mahmut-A 2 years ago edited

Hello,

There is problem on my Stimulus that it is now showing output of java script. My project is working under ubuntu apache web server.

Below is my base config and I added {{stimulus_controller ('hello')}} to twig. could you please help to troubleshoot this problem? thank you

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ topology.title}}</title>
    <link rel="stylesheet" href="{{ asset('styles/styles.css') }}">


</head>
<body >

<div   class="sidebar">

    <ul class="sidebarlist">
        <a href="/"   > <img src="{{ asset ('images/logo.png') }}" {{ stimulus_controller('hello') }}  class="labpractise-logo" alt="LABPractise Logo"></a>
        <li><a href="{{ path('topologyDiagram') }}" target="_blank">Topology Diagram</a></li>
        <li><a href="{{ path('accessTask') }}" target="_blank">Access Task (PDF)</a></li>
    </ul>
</div>
    <div class="navbar">
            <span id="navbarspan">{{topology.name}}</span>
    </div>
    {% block body %}{% endblock %}
</body>

</html>

|

Victor SFCASTS Mahmut-A 2 years ago

Hey Mahmut,

Are you following this course on your private project you did you download the course code and started from the start/ directory? It feels like you're on a private project. Please, download the course code and look at the base.html.twig - that contains some blocks, e.g.:

        {% block stylesheets %}
            // ...
        {% endblock %}
        
        {% block javascripts %}
            // ...
        {% endblock %}

That are required for Stimulus to work, as they integrate Stimulus code into your project.

Cheers!

1 |

Mahmut-A Victor 2 years ago

thank you.I noticed it and after adding block javascript, it worked.

|

Victor SFCASTS Mahmut-A 2 years ago edited

Hey Mahmut,

Great, thanks for confirming javascript block helped!

Cheers!

1 |

This tutorial works perfectly with both Symfony 7 & 8!

Symfony 7

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "php-cs-fixer/shim": "^3.46", // v3.46.0
        "phpdocumentor/reflection-docblock": "^5.3", // 5.3.0
        "phpstan/phpdoc-parser": "^1.25", // 1.25.0
        "symfony/asset": "7.0.*", // v7.0.3
        "symfony/asset-mapper": "7.0.*", // v7.0.2
        "symfony/console": "7.0.*", // v7.0.2
        "symfony/dotenv": "7.0.*", // v7.0.2
        "symfony/flex": "^2", // v2.4.3
        "symfony/framework-bundle": "7.0.*", // v7.0.2
        "symfony/monolog-bundle": "^3.0", // v3.10.0
        "symfony/property-access": "7.0.*", // v7.0.0
        "symfony/property-info": "7.0.*", // v7.0.0
        "symfony/runtime": "7.0.*", // v7.0.0
        "symfony/serializer": "7.0.*", // v7.0.2
        "symfony/stimulus-bundle": "^2.13", // v2.13.3
        "symfony/twig-bundle": "7.0.*", // v7.0.0
        "symfony/ux-turbo": "^2.13", // v2.13.2
        "symfony/yaml": "7.0.*", // v7.0.0
        "symfonycasts/tailwind-bundle": "^0.7.1", // v0.7.1
        "twig/extra-bundle": "^2.12|^3.0", // v3.8.0
        "twig/twig": "^2.12|^3.0" // v3.8.0
    },
    "require-dev": {
        "symfony/debug-bundle": "7.0.*", // v7.0.0
        "symfony/maker-bundle": "^1.52", // v1.53.0
        "symfony/stopwatch": "7.0.*", // v7.0.0
        "symfony/web-profiler-bundle": "7.0.*" // v7.0.2
    }
}

Previous Challenge

Next Chapter