Chapters

21 Chapters | 2:23:48 |

01

Hello Symfony

6:13
02

Meet our Tiny App

5:13
03

Routes, Controllers & Responses

8:24
04

Wildcard Routes

7:46
05

Symfony Flex: Aliases, Packs & Recipes

8:50
06

Flex Recipes

7:51
07

Twig ❤️

6:05
08

Twig Inheritance

8:02
09

Profiler: Your Debugging Best Friend

7:28
10

Assets, CSS, Images, etc

10:36
11

Generate Urls & bin/console

7:57
12

JSON API Endpoint

4:58
13

Smart Routes: GET-only & Validate {Wildcards}

4:56
14

Service Objects

5:38
15

The Twig Service & Profiler for API Requests

6:04
16

Setting up Webpack Encore

5:12
17

Packaging JS and CSS with Encore

6:05
18

Installing 3rd Party Code into our JS/CSS

5:51
19

Stimulus: Sensible, Beautiful JavaScript

5:01
20

Real-World Stimulus Example

8:50
21

Turbo: Supercharge your App

6:46

> Symfony 6 > Harmonious Development with Symfony 6

10.

Assets, CSS, Images, etc

|

|

Autoplay

Previous Challenge

Next Challenge

Login or Register to check out the script

23 Comments

Sort By

Login or Register to join the conversation

Benanamen 3 years ago edited

After following the instructions exactly and copying the files from the tutorial folder I refreshed the page and nothing changed. After some digging I discovered the page was cached by Symphony and kept reading the old page.

FIX: Clear the cache by running command: php bin/console cache:clear

RESPONSE:

C:\laragon\www\mixed_vinyl>php bin/console cache:clear

 // Clearing the cache for the dev environment with debug true


 [OK] Cache for the "dev" environment (debug=true) was successfully cleared.

18 |

Ngawang-choeden-S Benanamen 3 years ago edited

@Benanamen
Thanks for that, also had same issue.

|

Victor SFCASTS Benanamen 3 years ago

Hey Benanamen,

Yeah, clearing the cache should be the first option to try, in most cases it helps :) Thanks for this tip!

Cheers!

|

Brentspine 3 years ago

So the layout now looks great! But the content for our homepage is... just kind of hanging out... looking weird... like me in middle school

Golden 😆

3 |

Lotfi 3 years ago

i just cloned the repo switched to the styling branch
i'm not seeing any tutorial folder

1 |

Victor SFCASTS Lotfi 3 years ago

Hey Lotfi,

The repo is not the right way to get the correct course code as the course code is shared across many tutorials and also coded and separated with our internal tools. To get the course code you need to open any video page and in the right-up corner find the "Download" -> "Course Code" button. That's the only correct way to get the related course code for the specific tutorial with all the related materials.

Cheers!

3 |

Digital-Pig 1 year ago

Don't use webpack until you really learn to use it. If you use it wrong, you'll be loading the same JS & CSS files on every page, whether the page uses them or not. I've worked with companies that didn't understand how to use it properly and one of them ended up with a 34MB webpack bundle being loaded on every page.
Unless you have a lot of local resources there is no need for it at all.
If you do use it, learn how to do so properly. There are multiple strategies to bundle the correct files for the correct application state.

|

MolloKhan SFCASTS Digital-Pig 1 year ago

That's a good advice. Also, that's the reason behind the Symfony Encore component, although it is shifting onto Asset Mapper now.

Cheers!

1 |

Digital-Pig 1 year ago

In the previous video it stated that using dump() without any arguments, in the twig template only, shows the known variables. But in the challenge after the video, it asks what the result of doing this would be, but it never specified whether talking about the templates or not. So, one of the answers was to show known variables (correct if in twig), but the correct answer was that it will throw an error (only if not in twig).
This is a confusing challenge for new developers and needs to be fixed.

|

MolloKhan SFCASTS Digital-Pig 1 year ago edited

Hey @Digital-Pig

Thank you, you're right, it's a bit confusing. I made the question clearer

Cheers!

1 |

Mahmut-A 2 years ago

Hello,

In asset , my path is not automatically completed. I am using visual studio code. Is there any trick to autocomplete?

thank you

|

Victor SFCASTS Mahmut-A 2 years ago

Hey Mahmut,

Yes, there's! Delete VS and install PhpStorm with Symfony plugin :p

But if serous, unfortunately don't use VS so not sure, try to look for a Symfony-related plugins maybe, but I think PhpStorm just has more autocomplete features for Symfony projects lately, I would recommend it instead.

Cheers!

|

Mahmut-A Victor 2 years ago

thank you so much Victor:)

|

Brentspine 3 years ago

For a quick revision on how to use filters you can add

<h2 class="mb-4">{{ tracks|length }} songs ({{ tracks|length * 10 / 2 }} minutes of {{ tracks|length * 10 }} still available)</h2>

in the homepage.html.twig file, which reads out the length of the tracklist

|

Victor SFCASTS Brentspine 3 years ago edited

Hey @Brentspine ,

Thanks for sharing this tip :) Ideally, it would be great to know the exact length of each song so you could compute it with seconds approximations.

Cheers!

|

Otacon 3 years ago

Hello can't get the asset path autocompletion , any idea please?

|

MolloKhan SFCASTS Otacon 3 years ago

Hey Otacon,

do you have enabled the Symfony support plugin in your PhpStorm installation?

|

Otacon MolloKhan 3 years ago

Hi MolloKhan, yes its enabled...

|

MolloKhan SFCASTS Otacon 3 years ago

Interesting... Try upgrading PhpStorm and the plugin. Then open the settings configuration and check all the options below the "code folding" label, and then click on the "Clear index" button. It should do the trick.

Cheers!

|

Peter 4 years ago

Hey Ryan,

Thanks for this excellent tutorial about assets.

One thing that I'm wondering how to use the asset helper (like you use in twig) in a controller, so that I could use it to generate a url to lets say $this->asset('assets/imgs/profilepic.jpg');

Any help would be much appreciated I've googled and googled but nothing really came up for Symfony 6.

Best wishes,
Peter

|

Victor SFCASTS Peter 4 years ago

Hey Peter,

Excellent question! Well, if you use a Symfony plugin in PhpStorm - you can hold Cmd and click on the asset() Twig function - it should open the method responsible where you can see what service it uses behind the scene :) With this little trick you would figure out that asset() function uses Symfony\Component\Asset\Packages::getVersion() behind the scene, try to inject that service into your controller and call the getVersion() method on it for your path.

I hope this helps!

Cheers!

2 |

Benoit-L 4 years ago

Hi there, when I try to run the final solution just to see how it runs I have the following error : [Application] Apr 18 19:12:57 |CRITICA| REQUES Uncaught PHP Exception Twig\Error\RuntimeError: "An exception has been thrown during the rendering of a template ("Asset manifest file "C:\wamp64\www\code-symfony\
finish/public/build/manifest.json" does not exist.")." at C:\wamp64\www\code-symfony\finish\templates\base.html.twig line 7.
Any idea of what it could be ?

in the start version of the application, when I use the asset function it works (=it displays correctly) but I have the following error in the terminal : [Application] Apr 24 12:18:12 |ERROR | REQUES Uncaught PHP Exception Symfony\Component\HttpKernel\Exception\NotFoundHttpException: "No route found for "GET https://127.0.0.1:8000/favicon.ico" (from "https://12
7.0.0.1:8000/")" at C:\wamp64\www\code-symfony\start\vendor\symfony\http-kernel\EventListener\RouterListener.php line 130

|

weaverryan SFCASTS Benoit-L 4 years ago edited

Hey Benoit L.!

I can answer both of these :).

Uncaught PHP Exception Twig\Error\RuntimeError: "An exception has been thrown during the rendering of a template ("Asset manifest file
"C:\wamp64\www\code-symfony\finish/public/build/manifest.json" does not exist.")."

This is my fault! It looks like I need to update the README instructions for the "finish" code. What you need to do is install and run Encore. The commands are:


yarn install
# or you can run
npm install

yarn watch
# of you can run
npm run watch

That will compile the Encore assets, which includes building this missing build/manifest.json file.

in the start version of the application, when I use the asset function it works (=it displays correctly) but I have the following error in the terminal :
[Application] Apr 24 12:18:12 |ERROR | REQUES Uncaught PHP Exception Symfony\Component\HttpKernel\Exception\NotFoundHttpException:
"No route found for "GET https://127.0.0.1:8000/favicon.ico"

This is ok, you can ignore this :). Our site, at the start, doesn't have a "favicon". But, your browser still looks for it: the first time you come to the site, it makes a request in the background to "/favicon.ico" to see if it's there. It's not, so the request is handed by Symfony, which returns a 404. That's all you're seeing, and it's nothing to be worried about. In a real app, you would create a favicon, because, of course, you want a nice looking icon in your browser when someone visits your site.

Cheers!

1 |

Symfony 6

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.1",
        "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.4.5
        "symfony/framework-bundle": "6.0.*", // v6.0.4
        "symfony/monolog-bundle": "^3.0", // v3.7.1
        "symfony/runtime": "6.4.3", // v6.4.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
    }
}

Previous Challenge

Next Challenge