Assets: CSS, Imágenes, etc

I see, you have to look at the profiler for the correct route i.e. the ajax requests.

Hey Matěj V.!

Hmmm, that's interesting! That should not be required. The manifest.json file that you're referring to comes if you use Webpack Encore in Symfony, which is a great library, but one that we're not using at this moment in the tutorial (we do add it later on). When you use Encore, it creates a public/build/manifest.json file (among other files) that contains a map of "source filename" => "final filename" for all the things it builds.

But out of the box, Symfony doesn't look for this file. It only starts looking for it once you have Encore installed. More accurately, when you install Encore, its recipe adds a configuration file that activates this: https://github.com/symfony/recipes/blob/master/symfony/webpack-encore-bundle/1.9/config/packages/assets.yaml

The tl;dr is this: I think that somehow you have this json_manifest_path config already in your app... which normally comes when you install Encore. If you DO have this, but don't have Encore installed, then delete it. If you have this because you DID install Encore, then you can use Encore to build your assets, including this manifest.json file :).

Cheers!

Thank you for answer and mainly for this great course, It's one of the clearest guides on Symfony or anything programming wise that I've seen so far, while along being really positive! :)
And yeah I think I've copied the libraries that are used in this tutorial in the versions tab right away on start of the course, so it just got confused that the file wasn't present.

We're happy to know you are liking our content. Cheers!

Hey Paulus D.

No worries, it happens. As a tip, when weird things happens, sometimes clearing the cache or restarting the web server helps.

Cheers!

Hey Alessandro,

OK, as far as I understand you moved style.css file to public/ folder, right? Then, in the template you should be able to link it as:

<link rel="stylesheet" href="/style.css">

But if you moved that css file to a subfolder e.g. public/css/ - then you would need to reflect that subdirectory in the path:

<link rel="stylesheet" href="/css/style.css">

Also, make sure you haven't started the project from a subfolder, otherwise it still may fail loading. The asset() Twig function that we will show in this video would help with this:

<link rel="stylesheet" href="{{ asset('style.css') }}">

But make sure to write the correct path there that's related to the public/ folder.

I hope this helps!

Cheers!

Hey Duncan W.

A few Twig functions just don't work but in this case it should. Have you the Symfony Support plugin installed and enabled too?

Hey Georg,

Do you use the Symfony's official .htaccess? You can get it by installing "symfony/apache-pack", it has a recipe that will bring this .htaccess into your project: https://github.com/symfony/recipes-contrib/blob/master/symfony/apache-pack/1.0/public/.htaccess

I suppose this .htaccess should help. If not, probably take a look at the redirect statement you have and try to create a similar for assets. Unfortunately, I can't help with it.

But in case you want to prefix all your assets with "public/" - you can do it via:

framework:
    assets:
        base_path: 'public'

You can make it for a specific env, e.g. do it only for prod - then add it in "config/packages/prod/asset.yaml" only. Or you can base it on env var, then you can set it to empty string locally and to "public/" on production.

Cheers!

Hey Victor,
Yes I use .htaccess from "symfony/apache-pack". I'll try to adjust it for '/css, /images' etc. It's good to know that there is a quite elegant fallback by editing the config file(s).

Thanks a lot!

Hey Georg,

In case you didn't add any custom redirects to your .htaccess - I'd suppose it just should work out of the box. If you did - then yeah, you have to adjust it for your assets as well. But yeah, as you said, you have a fallback option thanks to assets() Twig function ;)

Good luck with adjusting .htaccess! :)

Cheers!

It MAY have snuck in there after a few chapters were already recorded 😀- you have a good eye for detail! It's definitely in the code download, though ;).

Thanks, bro ! :D

Hey Alexey,

Yes, this is the recent upgrade of Mac OS I suppose. If you press and hold the keyboard letter button for a second or two, e.g. "a" - it will show additional chars for that letter and you can choose from the list. I suppose it might be available on other OS, but I'm not sure how to do it, better google for it if you really need this feature.

Cheers!

Hey Łukasz,

Do you have Symfony Plugin installed and enabled in your PhpStorm? I suppose that autocompletion for "asset()" Twig function works thanks to that plugin. You need to install it first, then go to its configuration and enable it. Also, check that paths are correct. For example, the path to the web directory should be "public/". Then, after you enabled it and made necessary config tweaks inside - restart your PhpStorm just in case and try again.

I hope this helps!

Cheers!

Ok I know what is wrong. If you want to use that shortcuts you must install Live Templates from this link: https://github.com/knpunive.... If you do everything like it's said there, you should have this autocompletion asset thing. So you have it installed on your version of PHPStorm but didn't said about it :P

Hey Łukasz,

Oh, now I see you were talking about live templates, it's not actually an autocompletion :) Anyway, glad you figured out how to get it working yourself, good job!

Cheers!

I did everything like you said (install and enable Symfony plugin, configure it to public directory and restart PHPStorm), but nothing happens. This autocomplete only works after I write {{}} and inside it type asset. But if I wrote asset only inside "" it does nothing.

Do you have another autocomplete plugin (like Tabnine ?)
After remove it, I was able to autocomplete {{ asset("image/tisha.png" }} with just "tisha" and then hit tab.

Hey Tesdy14,

Thanks for this tip! Yeah, other plugins really may cause incompatibility problems sometimes.

Cheers!

Hey Łukasz,

Ah, yes, sure, it will only work in curly braces {{}} - this is how PhpStorm knows when you actually call that asset() function. Otherwise, it won't autocomplete because, well, the syntax is incorrect.

Cheers!

Hey @Dean

The CSS file comes with the course code inside the tutorial directory. You just need to download it from this page, at the right top corner it's the button :)

Cheers!