> Symfony 6 >

Course Overview

Login to bookmark this course

30 Days with LAST Stack

Unlock the full scope of the LAST stack with our intensive 30-day tutorial. Dive into Twig components and Tailwind CSS.

  • beginner
  • 1568 students
  • EN/ES Captions
  • EN/ES Script
  • Certificate of Completion

Your Guides

About this course

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "babdev/pagerfanta-bundle": "4.x-dev", // 4.x-dev
        "doctrine/doctrine-bundle": "^2.10", // 2.12.x-dev
        "doctrine/doctrine-migrations-bundle": "^3.2", // 3.4.x-dev
        "doctrine/orm": "^2.16", // 2.18.x-dev
        "knplabs/knp-time-bundle": "dev-main", // dev-main
        "pagerfanta/doctrine-orm-adapter": "4.x-dev", // 4.x-dev
        "pagerfanta/twig": "4.x-dev", // 4.x-dev
        "symfony/asset": "6.4.*", // 6.4.x-dev
        "symfony/asset-mapper": "6.4.*", // 6.4.x-dev
        "symfony/console": "6.4.x-dev", // 6.4.x-dev
        "symfony/dotenv": "6.4.x-dev", // 6.4.x-dev
        "symfony/flex": "^2", // 2.x-dev
        "symfony/form": "6.4.x-dev", // 6.4.x-dev
        "symfony/framework-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/monolog-bundle": "^3.0", // dev-master
        "symfony/runtime": "6.4.x-dev", // 6.4.x-dev
        "symfony/security-csrf": "6.4.x-dev", // 6.4.x-dev
        "symfony/stimulus-bundle": "2.x-dev", // 2.x-dev
        "symfony/twig-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/ux-autocomplete": "2.x-dev", // 2.x-dev
        "symfony/ux-live-component": "2.x-dev", // 2.x-dev
        "symfony/ux-turbo": "2.x-dev", // 2.x-dev
        "symfony/ux-twig-component": "2.x-dev", // 2.x-dev
        "symfony/validator": "6.4.x-dev", // 6.4.x-dev
        "symfony/web-link": "6.4.*", // 6.4.x-dev
        "symfony/yaml": "6.4.x-dev", // 6.4.x-dev
        "symfonycasts/dynamic-forms": "dev-main", // dev-main
        "symfonycasts/tailwind-bundle": "dev-main", // dev-main
        "tales-from-a-dev/flowbite-bundle": "dev-main", // dev-main
        "twig/extra-bundle": "^2.12|^3.0", // 3.x-dev
        "twig/twig": "^2.12|^3.0" // 3.x-dev
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.6.x-dev
        "phpunit/phpunit": "^9.5", // 9.6.x-dev
        "symfony/browser-kit": "6.4.*", // 6.4.x-dev
        "symfony/css-selector": "6.4.*", // 6.4.x-dev
        "symfony/debug-bundle": "6.4.x-dev", // 6.4.x-dev
        "symfony/maker-bundle": "^1.51", // dev-main
        "symfony/panther": "^2.1", // v2.1.1
        "symfony/phpunit-bridge": "7.1.x-dev", // 7.1.x-dev
        "symfony/stopwatch": "6.4.x-dev", // 6.4.x-dev
        "symfony/web-profiler-bundle": "6.4.x-dev", // 6.4.x-dev
        "zenstruck/browser": "1.x-dev", // 1.x-dev
        "zenstruck/foundry": "^1.36" // 1.x-dev
    }
}

LAST stack - Live Components, AssetMapper, Stimulus & Turbo - puts the joy, productivity & simplicity back into creating rich, frontend experiences. And in 30 days, I'll prove it:

  • AssetMapper fundamentals
  • JavaScript Modules? ESM?
  • 3rd party packages with importmap:require
  • CSS
  • Tailwind CSS!
  • Stimulus
  • UXs Package
  • Turbo Drive
  • Turbo Frames
  • Popover & Stimulus Components
  • Fully-armed "Data tables" setup
  • View transitions & CSS transitions
  • Toast Flash Notifications
  • Turbo Streams
  • Reusable, fully-featured modals
  • Twig Components
  • A Modal Twig Component
  • Live Component
  • Real-time form validation
  • Dynamic / Dependent Forms
  • "Add New" to a select element from a form
  • Testing Twig Components & Live Components
  • Functional testing with JavaScript
  • Flowbite Bonus

🛸

Next courses in the Symfony 6: Tools, Tools, Tools! section of the Symfony 6 Track!

43 Comments

Sort By
Login or Register to join the conversation
JonathanP avatar JonathanP 1 month ago

Hi !

First and foremost, thanks for this great course, I'm currently implementing this stack on my next project and so far it's great !

I just have a question regarding redirection after submission with a modal : let's say I want to redirect user to the app_voyage_edit route after submiting a new voyage through a modal, how would it be possible ?

If I change the redirect in the controller, it works but the edit form goes in the modal, and it's not the behavior I'm looking for.

My first idea was to extend base.html.twig in the voyage/edit.html.twig template instead of modalBase.html.twig, but it fails to redirect in that case.

I thought of creating a redirect_controller.js to change the window.location.href through a turbo-stream, but then I miss the toast notification ...

Is there a way I'm not aware of ? Does anyone have a better idea ?

Thanks a lot for your work, and of course I wish Ryan a full recovery !

| Reply |

Hey @JonathanP

Thank you for your kind words. I believe you need a full-page refresh for this case. To make a turbo-frame load the content on the outside you need to add this HTML attribute target="_top"
I recommend watching this video, it shows off how to do fancy stuff after a "modal success" https://symfonycasts.com/screencast/last-stack/modal-success

Cheers!

1 | Reply |
JonathanP avatar JonathanP MolloKhan 1 month ago edited

Hi @MolloKhan , and thank you so much !

I knew it had been explained somewhere (in the turbo-frames video in fact), and I am a little upset at myself for having bothered someone for something that could have been done with a little more commitment to research ...

Again, thank you !

| Reply |

No problem! By the way, at the top of the page we have a search bar where you can look over things related to this course only or through all the courses

Cheers!

| Reply |
Fedale avatar Fedale 3 months ago

Thanks a lot for this fantastic tutorial!

| Reply |
OldCoder avatar OldCoder 3 months ago

GREAT tutorial! On the Voyage new/edit page, either with/without modal, when you pick a value from the browser's suggestions (psuedo element "internal-input-suggested) for the Purpose field, it activates the site search modal... any idea why?

| Reply |

Hey OldCoder,

Hm, that's weird behavior, please double-check what exactly you listen to to open the site search modal. Is that internal-input-suggested a pseudo-element? Could you share an example how you use that? Fairly speaking I don't know that internal-input-suggested, but quick googling of it shows that it may cause some issues. I suppose it's only Chrome browser feature? If so, probably that just has a bug with it. Otherwise, try to use it in a different browser, e.g. Firefox. The same behaviour?

I hope that helps!

Cheers!

| Reply |
Tac-Tacelosky avatar Tac-Tacelosky 3 months ago

Great tutorial. To make it production-ready, we'd only want to show the planet edit buttons to ROLE_ADMIN, and the Voyage edit buttons to IsGranted('VOYAGE_ADMIN', voyage), and the Voyage new button to ROLE_USER. All of this is easy enough to do in Symfony and Twig, but what recommendations do you have for registration / login with LAST? You've done tutorials in the past that have had web authentication at least being via an AJAX call, I think that was in a Vue tutorial.

I've been playing around with making this a PWA so that it can be run offline, a great exercise in page caching, pre-loading, service workers, etc. But it'd be really cool if there were authentication.

My inclination would also be to use ApiPlatform, but maybe that's not necessary. But obviously the add/edit/delete buttons can't be visible to everyone, so I'm wondering how you would approach this if there had been a few more days in the month when you made this awesome 30-day tutorial.

| Reply |

Hey Tac,

So yeah, login/registeration form is just a regular form so you can handle it in the way we handle forms here. Basically, I bet LiveComponents will do the trick well here. The ApiPlatform might be an overkill for this IMO, but if you're already using that in your project - you can give it a try, though I personally didn't do that before.

About PWA - hm, not sure here, I personally don't have experience in that. So probably a lot of possible edge cases to solve, maybe it's better to watch into more specific tools like VueJS to implement truly SPA, etc.

I hope that helps!

Cheers!

| Reply |

What a great course as always! I am actually applying the things I've learned here to my current project. Feels good to say good bye to encore!

I am a bit confused on when to use LiveComponents vs TwigComponents. I think I understand the difference... input vs no input? I guess I will need more experience to be able to decide on which to use case by case.

I am attempting to create components to be used for e-commerce. Btw... do you know of any nice bundle that would make developing simple subscription webapps simpler? (eg. subsription plans, payment methods, orders, returns, recurrent billing, etc.). I found Shapecode but is 4 years old

| Reply |

Hey again @escobarcampos!

What a great course as always! I am actually applying the things I've learned here to my current project. Feels good to say good bye to encore!

Woo! Best possible situation!

I am a bit confused on when to use LiveComponents vs TwigComponents. I think I understand the difference... input vs no input? I guess I will need more experience to be able to decide on which to use case by case.

You need a LiveComponent if you need your TwigComponent to reload via Ajax as the user interacts with it. That's a pretty good rule of thumb. But, of course, you can also handle a lot of user interaction just with Stimulus & Turbo. So even if I created a TwigComponent (because maybe I want something to be reusable, or provide its own variables), if I need some interactivity (like submitting a form via Ajax), I might just use Turbo & Stimulus for that. But you can also use LiveComponents, and those are especially useful if the user interaction gets more and more complex.

Btw... do you know of any nice bundle that would make developing simple subscription webapps simpler? (eg. subsription plans, payment methods, orders, returns, recurrent billing, etc.). I found Shapecode but is 4 years old

I don't :/. I hope we can release something some day. I'd recommend checking out Paddle or Lemonsqueezy in general as your payment processor. They can handle a lot of the heavy lifting for you.

Cheers!

| Reply |
Kilian-K avatar Kilian-K 5 months ago edited

What an incredible tutorial and a bunch of new revolutionary technologies all mixing up so cleanly together.

Already using this knowledge in personal and professional projects, really amazing stuff.

I have a couple of questions that came to my head while using some of the technologies mentioned in this tutorial and I could not find the answer online:
1- Is there a way to ask forms as LiveComponents to validate on debounce rather than on focusing out of input field?
2- Is there a new version of EasyAdminBundle in the works that would integrate LiveComponents and have this frontend validation enabled?

Thank you very much for your great work!

| Reply |

Hey @Kilian-K

I'm glad to know you find the tutorial useful. To change when to submit the form, you need to override the getDataModelValue() method from the trait Symfony\UX\LiveComponent\ComponentWithFormTrait

About EasyAdmin, I've not heard that they're planning to integrate LiveComponents but I'd imagine they eventually will. You may want to ask that question in their GitHub repository or perhaps in the Symfony Slack channel

Cheers!

1 | Reply |

Thank you for the answers MolloKhan, managed to make the validation on debounce happen with your tip! I am guessing the same about EasyAdmin, I guess it will just take a little bit of time!

Have a nice day!

| Reply |
hamza_makraz avatar hamza_makraz 5 months ago

Thanks, Rayan and the SymfonyCasts team. I enjoyed the awesome videos 🙌🏼.

| Reply |
Damien avatar Damien 5 months ago

Thanks a lot Ryan for this incredible course. I have a side question: can you tell us which plugins do you use in your Phpstorm? In mine, twig:Button or turbo-stream for example are underlined because unknown for Phpstorm. Thanks!

| Reply |

Hey Damien,

It might depend on PhpStorm version. But the Symfony plugin activated and correctly configured (we use a paid version of it in the screencast btw) should do the trick with it. Other plugins - are mostly visual like "Atom Material Icons" and "Rainbow Brackets". Also, Ryan has GitHub's Copilot and Stimulus plugins :)

Cheers!

1 | Reply |

Hello,

It's clearly great to have all this UX "simply", us being so much more back-end/php oriented. You cover topics that are commonly used (modals, toasts...) regardless of the project. And that's awesome. As always, you don't settle for the minimum, you fine-tune with a few CSS classes or a few lines of JS : it makes all the difference.

You've proved that you can do without Node.js but... regarding quality tools like prettier, eslint... if we want to run them locally, its another story. After that, we could very well have Node (or docker) just for that, we'd still have the complexity of Webpack less. Curious to hear your opinion on the subject :)

Thanks!

| Reply |

Hey @Steven!

This is a very good question / thing to notice :). And I think you understand the situation perfectly.

So yes, the real answer is "remove your full build system - you don't need it!". But if there is some tool that you want to use and it's built in Node, absolutely, go for it :). Your setup will still be 95% simpler than it was before. I say a lot about "removing node" because you don't "need" it. And this is such a big change, I'm trying to be clear a about this possibility. The real situation is more nuanced. Start with no-build, Then intelligently opt into tools if you want them. I think many apps may still have no node, but some might, and that's cool :).

Cheers!

1 | Reply |
Fabrice avatar Fabrice 6 months ago

Hey! I've never used Turbo before but I can't wait to discover it on your training!

I already have a first question. Is it possible to use Turbo on EasyAdmin? :)

| Reply |

Hey Fabrice,

In theory, it should be possible, you should just enable it for those pages in the way we show in our Turbo tutorial: https://symfonycasts.com/screencast/turbo . Though if you watched that course - sometimes Turbo may have some edge cases, that you would need to handle. What I mean is that I haven't done that myself yet, so can't say for sure, but you can easily try it out if you're interested in it and see if it works for you, but be ready to fix some edge cases.

Cheers!

| Reply |

Okay thank you!

| Reply |

Hey @Fabrice!

We'll talk a bit in this tutorial about how Turbo is great, but how you may not be able to enable Turbo Drive immediately in a legacy application. But, Turbo is 2 other pieces (Frames & Drive) and those are much easier to enable even in those situations.

About EasyAdmin, I get this question from time-to-time. I think that EasyAdmin itself will need to update how its JavaScript is organized a bit to allow for Turbo to be used. I would LOVE to see this happen and even help with it. As you'll see in this tutorial, we could do some really nice things like modals, etc easily in EasyAdmin if it embraced Turbo.

Cheers!

1 | Reply |

Hey! Imagine if we could do this in EasyAdmin, it would be incredible! Looking forward to seeing if this happens, and what possibilities it may offer!

| Reply |

I've opened an issue about it - https://github.com/EasyCorp/EasyAdminBundle/issues/6051 - we'll see :)

2 | Reply |

Oooh! Nice idea :)

| Reply |
Ruslan avatar Ruslan 6 months ago

Please, spend enogh time for "Testing" without it it's just toys.
Thank you.

| Reply |

Hey Ruslan,

Thank you for your feedback! What exactly testing are you talking about? The bundles we're using in this course are tested and have tests, you can see it in its repos. Or do you want to see the testing topic covered by this tutorial? Could you give us more context please?

Cheers!

| Reply |

I saw it and it's greate.
I woud like to highlite what 'Testing' is important part in each project, and will be good to see best practice for it.

Thank you.

| Reply |

Hey Ruslan,

I see what you mean. Unfortunately, I'm not sure testing will be covered with this tutorial, that's a completely different topic that requires its own tutorial. There are a lot of testing tools in JS that may help you with it, but mostly you can test it even with Behat/Panther - those tools help you to test UI in a real browser that executes JS, so you literally can open a JS popup, press buttons, send AJAX requests, wait for responses, etc. We have a useful blog post here: https://symfonycasts.com/blog/behat-panther . Also, we have a separate tutorial about Behat testing: https://symfonycasts.com/screencast/behat

I hope that helps!

Cheers!

1 | Reply |

I WILL spend some time near the end of this tutorial on testing - I have at least 1 day scheduled for it :). I don't know how far we'll get into it (I haven't written this part), but I want to make something real-world & usable.

Cheers!

1 | Reply |

Testing is why I prefer to separate backend and frontend. It simplifies both backend development (only APIs in Symfony, no Twig, no JS) and frontend development (JS testing in pure-js repository).

I've seen enough legacy Symfony projects with everything combined: Twig, JS, jQuery, Selenium driver, JS-enabled tests. In my experience, for big projects that grow over several years and need maintenance and upgrading, it's better to separate.

| Reply |

Hey @SRP!

I think this is totally fair! However, as a counterpoint, I wouldn't immediately choose the complexity of separating the frontend and backend simply so that my tests are cleaner and faster. Even in that case, I'm going to have end-to-end tests that verify the full user experience.

In the end, choose whichever you're most comfortable & happiest with. This tutorial is about proving that you can choose the Twig path and still build an incredible UI.

Cheers!

| Reply |
loevgaard avatar loevgaard 7 months ago

When is this coming? Really looking forward to it!

| Reply |

Hey @loevgaard ,

Thank you for your interest in SymfonyCasts tutorials! Right now, we're actively working on it :) According to our roadmap: https://symfonycasts.com/courses?status=upcoming&sort=popular#all - it should be the next tutorial that we will start releasing, so it will happen shortly after we finish releasing the "PHPUnit Integration Testing" course.

Cheers!

1 | Reply |

Thanks :)

| Reply |

I can't wait to see the part about modals. Will it be with the dialog element?

| Reply |

dialog is my plan right now, yup! But we'll see once I get to coding that part :)

3 | Reply |
Jerzy avatar Jerzy 7 months ago

I really look forward to this!

| Reply |
Fabrice avatar Fabrice 7 months ago

Oh my God! Did I read it correctly? Are you going to implement DataTable? It's awesome ! This bookstore alone deserves training because it allows you to do so many things!

Seeing her in this training makes me really happy! I wonder how it will be used (in combination with Live Component??)

Can’t wait to see this training, it’s going to be great!

| Reply |

Oh my God! Did I read it correctly? Are you going to implement DataTable? It's awesome !

😀

I wonder how it will be used (in combination with Live Component??)

You CAN do it with this - especially once we merge https://github.com/symfony/ux/pull/1230 - but I'm planning to do it entirely with Turbo frames

Can’t wait to see this training, it’s going to be great!

Me too!

3 | Reply |
Nick-F avatar Nick-F 7 months ago

This looks sick. I've worked with stimulus and turbo for a while, implemented one feature using live components in my SaaS but haven't dug very deep because it's kind of hard to know where live components are superior to stimulus. I do love mercure too, I hope this touches on that.
I'm about to ramp up dev on a new SaaS and would love to implement the new concepts from this course, especially Asset Mapper, which I haven't touched at all.
Any idea of the release timeline?

| Reply |

Hey Nick!

In general, the idea is to try to stop using Stimulus for simple things that could be done via Live Components... because it's like you're just "reinventing the wheel", you send (in theory) more time to implement the same that already implemented in Live Components, you flood your JS code with more files (Stimulus controllers), etc. So, Live components clearly have some benefits in some cases, you only need to know more about live components, how they work, and what they can do for you. So, in short, you can leave Stimulus for more complex unique cases that cannot be done with Live Components (when they are not enough to implement it).

AssetMapper is also a cool thing, and it helps you to avoid using NodeJS to build your assets, that's why it's cooler than Webpack Encore. For most of websites, Assets Mapper would be enough, and you can switch to it from the Webpack Encore (though it will require some work). In case you really work with Node in your app, then yeah, better to stick to Webpack Encore then. I would recommend you to watch the course about it: https://symfonycasts.com/screencast/asset-mapper - it will be much clearer for you if you need Webpack Encore, or if you can simplify and speed up your building assets process a lot with Asset Mapper :)

P.S. Some super secret info - we use Webpack Encore on SymfonyCasts, but we're planning to switch to AssetMapper instead (because it's just awesome), and we do have a lot of JS assets, Stimulus controllers, etc. behind the scene :)

Cheers!

| Reply |

Delete comment?

Share this comment

astronaut with balloons in space

"Houston: no signs of life"
Start the conversation!