Chapters
32 Chapters
|
4:16:27
|
Login to bookmark this video
-
Course Code
Subscribe to download the code!
Subscribe to download the code!
-
This Video
Subscribe to download the video!
Subscribe to download the video!
-
Subtitles
Subscribe to download the subtitles!
Subscribe to download the subtitles!
-
Course Script
Subscribe to download the script!
Subscribe to download the script!
Scroll down to the script below, click on any sentence (including terminal blocks) to jump to that spot in the video!
Subscribe to jump to this part in the video!
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.
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
}
}What JavaScript libraries does this tutorial use?
// importmap.php
return [
'app' => [
'path' => './assets/app.js',
'entrypoint' => true,
],
'js-confetti' => [
'version' => '0.11.0',
],
'@hotwired/stimulus' => [
'version' => '3.2.2',
],
'@symfony/stimulus-bundle' => [
'path' => './vendor/symfony/stimulus-bundle/assets/dist/loader.js',
],
'tom-select' => [
'version' => '2.3.1',
],
'tom-select/dist/css/tom-select.default.css' => [
'version' => '2.3.1',
'type' => 'css',
],
'@hotwired/turbo' => [
'version' => '7.3.0',
],
'stimulus-popover' => [
'version' => '6.2.0',
],
'debounce' => [
'version' => '1.2.1',
],
'turbo-view-transitions' => [
'version' => '0.3.0',
],
'stimulus-use' => [
'version' => '0.52.1',
],
'flowbite' => [
'version' => '2.2.1',
],
'@popperjs/core' => [
'version' => '2.11.8',
],
'flowbite-datepicker' => [
'version' => '1.2.6',
],
];
16 Comments
I just did: composer require symfony/ux-turbo at my Easy Admin project.
My controllers.json was edited:
At my composer.json I have the "symfony/ux-turbo": "^2.16", version
My project does not have a importmap.php
But when I'm navigating through my admin I still get full-page reloads.
What did I miss?
Hey @Tim-V
Are you trying to use Turbo with EasyAdmin? I'm afraid EasyAdmin has not added support for Turbo yet, perhaps they will in the future.
Cheers!
Hi @MolloKhan,
Thanks for your reply. Yes I am trying to get Turbo Drive and Frames working at my Easy Admin project. So there is no way to get the Turbo Drive or Frames working?
I'm not saying it is impossible but basically, you'll have to modify EasyAdmin in a way that it can work with Turbo. That's something I've not done in the past, so I can't say how hard it might.
As a note, Turbo 8 (added in UX v2.15.0) includes "InstantClick" (https://turbo.hotwired.dev/handbook/drive#instantclick) which causes a pre-load like event (and additional XHR calls) on hover.
InstantClick also makes it impossible to click on session links in the XHR panel of the debug tool bar because it hovering over the link causes another XHR request, which then loads another line into list of XHR calls and moves the link out from under your mouse pointer.
To disable InstantClick globally by adding
<meta name="turbo-prefetch" content="false">to your<head>, but then you cannot enable prefetch at all. Instead, you can adddata-turbo-prefetch="false"to your<body>tag and then you can enable prefetch (as shown in this video) on a link-by-link basis.I believe this may be fixed now in the latest versions of Symfony - https://github.com/symfony/symfony/pull/54004
So, yay for the community!
Thank you for sharing it @Daryl
Hi !
If I click on the "previous" button of my browser (not the one coded in the app) it goes, well, to the real previous page, but not in the previous screen like expected. Is there any way to prevent the default behavior of the browser's previous button ?
Thank you :)
Hey @Laurent!
Can you tell me a bit more about the behavior you'd like? You said:
What do you mean by "previous page" vs "previous screen"?
In general, if the user clicks something (e.g. to open a modal or open a side drawer) and you want the "Back" button to "undo" that, then the click needs to "advance" the navigation. For example, if you're navigating a turbo frame, by default, those link clicks to not advance the navigation (and so they also do not change the URL). But in that case, you CAN make a frame "advance" the navigation if you want: https://symfonycasts.com/screencast/last-stack/data-tables#advancing-the-frame
Let me know if this helps!
Cheers!
Thank you Ryan, the "advance" feature was what I meant.
thank you for this tutorial, it's really nice :)
It's great that you can move between previously visited pages using browser navigation without downloading them again from the server,
but how to prevent this after logging out (for pages that should not be available to non-logged in users)?
Does Trubo provide any mechanisms for this?
Hey @Nataniel-Z
That's a great question. I believe a full page refresh may be necessary after login out (redirecting to somewhere else). Give it a try and let me know
Cheers!
When following this, only on the Voyages page (not the homepage or the Planets, I get this:
(link to image)
Seems to be somewhere in the ajax toolbar panel (in the symfony profiler bar)
Yo @Joris-Mak!
I'm not sure... other than I know that the web debug toolbar, sometimes, gets confused by Turbo. I mean, I know this happens when you add the preload attribute - but I haven't seen it without that preload (which I remove at the end of the chapter).
Either way - no big deal - just the WDT getting confused.
Cheers!
I don't get this - why when being on "voyage" page preload the same "voyage" page?
Hey @Nataniel-Z!
That's just me showing a bad example. I didn't even realize that I was already on the voyages page when I did this. The point is: if you know what the NEXT URL will be (which, if used correctly, would never be the current URL), you can preload it. Good example of this might be some linear process or documentation where users tend to go from one page to another - not something we really have in our app.
Cheers!
"Houston: no signs of life"
Start the conversation!