Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine

Turbo: Supercharge your App

Video not working?

It looks like your browser may not support the H264 codec. If you're using Linux, try a different browser or try installing the gstreamer0.10-ffmpeg gstreamer0.10-plugins-good packages.

Thanks! This saves us from needing to use Flash or encode videos in multiple formats. And that let's us get back to making more videos :). But as always, please feel free to message us.

Welcome to the final chapter of our intro to Symfony 6 tutorial. If you're watching this, you're crushing it! And it's time to celebrate by installing one more package from Symfony. But before we do, as you know, I like to commit everything first... in case the new package installs an interesting recipe:

git add .
git commit -m "Never gonna let you go..."

Installing symfony/ux-turbo

Ok, let's install the new package:

composer require symfony/ux-turbo

See that "ux" in the package name? Symfony UX is a set of libraries that add JavaScript functionality to your app... often with some PHP code to help. For example, there's a library for rendering charts... and another for using an image Cropper with the form system.

Symfony UX Recipes

So, as you can see, this did install a recipe. OoOOo. Run

git status

so we can see what that did. Most of this is normal, like config/bundles.php means it enabled the new bundle. The two interesting changes are assets/controllers.json and package.json. Let's check out package.json first.

When you install a UX package, what that usually means is that you're integrating with a third-party JavaScript library. And so, that package's recipe adds that library to your code. In this case, the JavaScript library we're integrating with is called @hotwired/turbo. Also, the symfony/ux-turbo PHP package itself comes with some extra JavaScript. This special line says:

Hey Node! I want to include a package called @symfony/ux-turbo... but instead of downloading that, you can just find its code in the vendor/symfony/ux-turbo/Resources/assets directory.

You can literally look at that path: vendor/symfony/ux-turbo/Resources/assets to find a mini JavaScript package. Now, because this updated our package.json file, we need to re-install our dependencies to download and get this all set up.

In fact, find your terminal that's running yarn watch. We've got an error! It says the file @symfony/ux-turbo/package.json cannot be found, try running yarn install --force.

Let's do that! Hit control+C to stop this... and then run

yarn install --force

or npm install --force. Then, restart Encore with:

yarn watch

The other file the recipe modified was assets/controllers.json. Let's go take a look at that: assets/controllers.json. This is another thing that's unique to Symfony UX. Normally, if we want to add a stimulus controller, we put it into the controllers/ directory. But sometimes, we might install a PHP package and that may want to add its own Stimulus controller into our app. This syntax basically says:

Hey Stimulus! Go load this Stimulus controller from that new @symfony/ux-turbo package.

Now this particular Stimulus controller is a little weird. It's not one that we're going to use directly inside of the stimulus_controller() Twig function. This is, kind of a, fake controller. What does it do? Just by it being loaded, it's going to activate the Turbo library.

Hello Turbo! By Full-Page Refreshes

So I keep talking about Turbo. What is Turbo? Well, by running that composer require command... then reinstalling yarn, the Turbo JavaScript is now active and running on our site. What does it do? It's simple: it turns every link click and form submit on our site into an Ajax call. And that makes our site feel lightning fast.

Check it out. Do one last full refresh. And then watch... if I click Browse, there was no full page refresh! If I click these icons, no refresh! Turbo intercepts those clicks, makes an Ajax call to the URL, and then puts that HTML onto our site. This is huge because, for free, our app suddenly looks and feels like a single page app... without us doing anything!

The Web Debug Toolbar & Profiler for Ajax Requests

Now, one other cool thing you'll notice is that even though full page reloads are gone, these Ajax calls do show up on the web debug toolbar. And you can click to go see the profiler for that Ajax call really easily. This Ajax part of the web debug toolbar is even more useful with Ajax calls for an API endpoint. If we hit the play icon... that 7 just went up to 8... and here's the profiler for that API request! I'll open that link in a new window. That's a super easy way to get to the profiler for any Ajax request.

So Turbo is amazing... and it can do more. There are some things you need to know about it before shipping it to production, and if you're interested, yup! We have a full tutorial about Turbo. I wanted to mention it in this tutorial because Turbo is easiest if you add it to your app early on.

All right, congratulations! The first Symfony 6 tutorial is in the books! Pat yourself on the back... or better, find a friend and give them a crisp high five.

And keep going! Join us for the next tutorial in this series, which will take you from a budding Symfony developer to someone who really understands what's going on. How services work, the point of all of these configuration files, Symfony environments, environmental variables, and a lot more. Basically everything you'll need to do whatever you want with Symfony.

And if you have any questions or ideas, we are here for you down in the comments section below the video.

Alright friends, see you next time!

Leave a comment!

Login or Register to join the conversation
Prim N. Avatar
Prim N. Avatar Prim N. | posted 1 year ago

database connection.

hey is there a resource to connect the whole project into a database or even a video.

2 Reply

I've been going along this 'tutorial' on the documentation, which has helped me a lot for anyone else wondering


1 Reply

Hey there,

What do you mean by "connect the whole project into a database"? In many of our tutorials, we use a database to store information. If you're using Doctrine, that's a straightforward thing to do



At the time of the comment I didn't spend much time looking for tutorials which was the reason I just agreed. I'm currently not in the financial position to buy courses but I found the documentation for doctrine which is also very helpful and enough for my purpose :)


It is good to know that Doctrine docs are helpful to you. By the way, we give for free the chapter script (including code blocks) below the video, so you can follow our tutorials at least in that way


Jakov Avatar

Your tutorials are by far the best I've seen for any programming topic.

1 Reply

Hey Jakov,

Thank you for your feedback! This really means a lot to us and pushes us to create more content ❤️


Juergen-S Avatar
Juergen-S Avatar Juergen-S | posted 9 months ago

Thank you for this great training (which was also free). As a developer with more than 20 years of experience, I only ever find training courses that are either far too detailed on minor details or that don't address practical topics (debugging, logging) at all. Only now do I understand Symfony 6 so that I know how best to start a new project.


Hey Juergen,

Thanks for your kind words. I'm so glad to hear that you find our courses useful.


Cameron Avatar

I get that turbo is used to make the page more SPA like, but how is that different from a full page refresh? There's no pre-loading, sure it keeps the console state etc, but it still takes time to load the page from the server and paint it right? To me that doesn't really seem like an advantage. So the advantage is that is just downloads everything in the background, paints it and then only switches over to the new page once it's all loaded?

What am I missing?

Vafilor Avatar
Vafilor Avatar Vafilor | posted 1 year ago

Hey team,

Maybe add an r to "you"? "Supercharge your App"?


Hey Vafilor!

Ah, yes, good catch! Thank you for reporting it, I fixed in https://github.com/SymfonyCasts/symfony6/commit/d0cd5bc0175c2ff4fc644c3e66520bd80cbd2e67


MarcoTohom Avatar
MarcoTohom Avatar MarcoTohom | posted 1 year ago

please add a video to learn how to add components to symfony point releases


Hey Marco,

Your idea sounds interesting, but I don't fully get it. Could you elaborate a bit more, please?

MarcoTohom Avatar

i have a project with symfony 3.8 and i want to add components to it


In case a bundle is what you need, you can create your own bundles without much hassle. Here's a tutorial about it https://symfonycasts.com/screencast/symfony-bundle

But if what you really need is a component, well, a component is just like any other PHP library that may use (or not) other Symfony components and are meant to do a specific job. So, you can just create another PHP app, and publish it somewhere so you can require it via Composer


Cat in space

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

What PHP libraries does this tutorial use?

// composer.json
    "require": {
        "php": ">=8.0.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "symfony/asset": "6.0.*", // v6.0.3
        "symfony/console": "6.0.*", // v6.0.3
        "symfony/dotenv": "6.0.*", // v6.0.3
        "symfony/flex": "^2", // v2.1.5
        "symfony/framework-bundle": "6.0.*", // v6.0.4
        "symfony/monolog-bundle": "^3.0", // v3.7.1
        "symfony/runtime": "6.0.*", // v6.0.3
        "symfony/twig-bundle": "6.0.*", // v6.0.3
        "symfony/ux-turbo": "^2.0", // v2.0.1
        "symfony/webpack-encore-bundle": "^1.13", // v1.13.2
        "symfony/yaml": "6.0.*", // v6.0.3
        "twig/extra-bundle": "^2.12|^3.0", // v3.3.8
        "twig/twig": "^2.12|^3.0" // v3.3.8
    "require-dev": {
        "symfony/debug-bundle": "6.0.*", // v6.0.3
        "symfony/stopwatch": "6.0.*", // v6.0.3
        "symfony/web-profiler-bundle": "6.0.*" // v6.0.3