Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine

Installing Turbo

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.

Wouldn't it be cool if when we click on a link or even submit a form, instead of that triggering a full page reload, it made an Ajax call... then updated the page with the new HTML? Well, that's exactly what Turbo Drive does. And it's a huge step towards making our app feel like a single page application.

Turbo itself is... just a JavaScript library! It has nothing to do with Symfony. But Symfony does have a package that makes it easier to use. Let's go get that package installed.

Head back to your terminal, open a new tab and run:

composer require "symfony/ux-turbo:^1.3"

After this finishes... run: git status to see what its recipe did:

git status

Ok: it looks like it installed a new bundle... called TurboBundle. It also changed our package.json file... let's go find that. It added two new packages including turbo itself. The recipe also updated our controllers.json file, which we learned about in the Stimulus tutorial. This adds a new Stimulus controller to our app. More on what that controller does a bit later.

{
"controllers": {
"@symfony/ux-chartjs": {
"chart": {
"enabled": true,
"fetch": "lazy"
}
},
"@symfony/ux-turbo": {
"turbo-core": {
"enabled": true,
"fetch": "eager"
}
}
},
"entrypoints": []
}

But... you probably noticed that we have an error from yarn:

The file @symfony/ux-turbo/package.json could not be found. Try running yarn install --force.

That makes sense! As we learned about in the first tutorial, we need to re-install our yarn dependencies so it can copy the new @symfony/ux-turbo package from our vendor/ sdirectory into the node_modules/ directory. Let's do it:

yarn install --force

When that finishes... run yarn watch again and... it's happy!

yarn watch

Hello Turbo Drive

Cool! So the @hotwired/turbo JavaScript package is now installed. Now... what do we need to do to activate Turbo Drive?

The answer is... nothing! It's already working!

Head back to your browser and refresh the page. Start clicking around. Woh! It's alive! And it feels fast!

Open up your browser tools... and then go to network tools and watch for XHR requests - or Ajax request. Yep! Every single click is now an Ajax request. There are zero full page reloads!

We now have... dare I say... a single page app! Tutorial finished! Good luck!

Okay, okay... of course the tutorial isn't finished yet. Turbo Drive feels like black magic... and that's never a great feeling. So next, let's discover how Turbo Drive works behind the scenes. We'll also see how Turbo was magically activated simply by installing it and I'll introduce you to a few subtle features of Turbo Drive that are already making the experience feel extra quick.

Leave a comment!

11
Login or Register to join the conversation

Hi,
I installed turbo and I get this error:
DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "turbo-frame" has already been used with this registry

Reply

Hi I installed turbo and I get this error

DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "turbo-frame" has already been used with this registry

I don't know why

thnaks!

Reply

Hey @Marc!

Hmm. That is weird. It sounds like Turbo is somehow being initialized twice. Internally, Turbo registers turbo-frame as a custom element (on CustomElementRegistry). So the error seems to be clearly saying that... this is somehow happening twice!

Is there anything special with your setup? Before you installed Turbo... is it possible it was already included somehow? I'm really not sure what could cause this to happen. Even if Turbo were imported multiple times (e.g. import * as Turbo from "@hotwired/turbo"), I'm pretty sure that this would still only result in it being registered once (as Turbo is smart enough not to allow itself to be initialized multiple times).

Let me know what you find out :).

Cheers!

Reply

Hi Ryan!

Thanks for your reply!

I found something interesting, this error is only triggered on debug mode, with the Symfony profiler. I put the environment in production mode and Turbo works like a charm!

Let me know if you have some idea why is loading twice on dev mode with the profiler!

Thanks!

Reply

If it is useful, my Symfony profiler (local) is loading by XHR requests while my coworkers not and our testing servers neather.

So this error is only happening to me.

Reply

Well... the fix was disable Xdebug... so weird

Reply

Woh... that IS weird. Both XDebug... and the fact that production mode fixed it. I'm not really sure what to say about this - but I'm glad I know that this could be a problem!

Cheers!

Reply
Scott S. Avatar
Scott S. Avatar Scott S. | posted 1 year ago | edited

He Ryan,

How do you get this to work with easyadmin. I have installed the @symfony/ux-turbo and added it to the easy admin dashboard with the configureAssets like so:


    public function configureAssets(): Assets
    {
        return Assets::new()
            ->addWebpackEncoreEntry('app');
    }

you can see that it has been added to the easyadmin head script:
/build/vendors-node_modules_symfony_stimulus-bridge_dist_index_js-nodemodules<b>symfony_ux-turbo</b>_dist-d2694b.js

Wat am i missing here?

Reply

Hey Scott,

If you're interested in Symfony UX integration in EasyAdmin - please, take a look at this chapter where we're talking about it and integrates ChartJS via Symfony UX into EasyAdmin dashboard: https://symfonycasts.com/sc...

I hope that helps!

Cheers!

Reply

Hello,

There is a problem with the course code. assets/controllers/featured-product-react_controller.js is referencing to assets/components/FeaturedProduct.js but the file is actually called assets/components/FeatureProduct.js (missing d in Featured).

Cheers

Reply

Hey julien_bonnier

Thanks for informing us, I've just fixed it :)

Cheers!

Reply
Cat in space

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

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=7.4.0",
        "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.18.5
        "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
    }
}