Assets: CSS & JavaScript

I came across your comment(s) as I was tearing my hair out over a similar issue. I ended up going through all my additional ini files (check phpinfo() for a list of yours), and removing the contents of each one (restart server between each edit) until finally it worked.

The cause of my issue was
"zlib.output_compression = On"

I commented this out for now.

Hi! I have a problem removing the cache. I insert the code rm -rf var/cache/dev/* in the console, but it responds rm is not a known command

ok, solved. I was in cmd for windows so I installed bash to run that command. I'm very very noob at this

Hey Roberto

But why are you trying to remove cache with rm -rf var/cache/dev/*?

Cheers!

Where can i find the tutorial example files?

Hey Mathis W.

Do you mean the course code? If so, there is a "download" button at the top right corner of this page. Click it, and then select "Course Code", you will get a zip file with 2 folders, the start and finish directory.

Cheers!

in the video at 6:20 we have src="images/astronaut-profile.png" when you added {{ asset() }} to it it loads the image.
I dont understand it. What's going on ?

In my own project in one of twig files i specified the path images/.../img.jpg" and it worked. I did the same in another twig file and it didn't worked.
It worked with asset function though but i want to drop asset func since it's no longer recommended.

Hey @wuwu!

Excellent question :). Let me clear this up a little bit:

1) First, the asset() function IS still recommended. In fact, i still use it in our Symfony 5 tutorial :). It's just not as commonly-needed anymore, because if you use Webpack Encore, then you have a different function you can use for your CSS and JS. But even in that case, you should still use asset() to point to images.

2) So let's talk about what the asset() function does. Basically... it does two things:

A) If you deploy to a CDN (where your assets are hosted on a different domain), you can add a little bit of configuration and all your assets paths will now point to that domain. If you need this functionality, it's great - and you'll be happy that you used `asset()` everywhere.

B) It detects whether your site is deployed at the root of your domain - e.g. example.com - or a sub-directory - e.g. example.com/sf-app-here. If it is under a sub-directory, it will automatically prefix all your paths with the subdirectory. So, `asset('images/astronaut-profile.png')` will become `/sf-app-here/images/astronaut-profile.png`.

At first look, it probably seems like neither of these are related to your situation. But actually, (B) IS doing something right now. Basically, in "normal" situation (where your site lives at the root of your domain like example.com or localhost:8000), the asset function does this:

`
asset('images/astronaut-profile.png')

BECOMES

/images/astronaut-profile.png
`

Yup. For 99% of the situations, the asset() function is a fancy way of adding a "/" at the beginning of the path :). And THAT is what makes the difference in your situation. Basically, if you put /images/astronaut-profile.png on both templates, it would work in both places (because this is basically equivalent to using the asset() function. But using relative paths - like ../images/img.jpg is never a good idea. Why? Imagine you have a path like that in your layout (so, it's loaded on every page). Look at these examples:

• When I go to example.com/login, my browser will look for example.com/images/img.jpg (because it will look at the URL, go up one directory thanks to the "../", then add /images/img.jpg)

• When I go to example.com/article/some-article, my browser will look for example.com/article/images/img.pjg (because it will look at the full URL, go up one directory to /article, then add "images/img.jpg").

That's a super long way of saying that putting relative paths in your template is a bad idea - and it's one of the things that asset() helps with :).

Let me know if that makes sense!

Cheers!

Hi!
i cannot delete var/cache/dev, its auautomatically back and my css isn't working.
Help pls

Hey Sebastian Józef

var/cache/dev/ is automatically generated directory for DEV environment it's always generates when project running. What exactly the issue? What errors do you see on page or browser dev console?

Cheers!

there In your videos I noticed that you often scroll the PhpStorm code editor very smoothly in both the X and Y directions simultaneously while the cursor stays put. It reminds me of something like the hand tool in Photoshop for pan scrolling. I was wondering how you accomplish that? Is that a Mac thing? A PhpStorm plugin? A PhpStorm hotkey? Horizontal + Vertical mouse wheels? Thanks in advance!

Hey Rob W.!

Ha! It's funny the things you take for granted... it didn't even occur to me that I was doing this :p. The answer is... probably boringly simple: it's the two-finger scroll on a touch pad. I don't use an external mouse ever - so that's where that comes from :).

Cheers!

The pictures are not loading for me after using assets.

Hey Tim,

Could you give us a bit more context? What exactly you're doing? Could you show us a line of code of your img tag? Are you sure the path you specify in asset() is correct?

Cheers!

Hi guys I would like to know if it is mandatory to storage the user data in a public directory. what about security? if for example I have customer data storage different locations how can link that data to the user without put it in the public directory?

To be more clear how can I separate data from the business logic without have to put it in public/? for example a customized video or images?

Hey Diego alejandro P.

Check out our cool uploads tutorial https://symfonycasts.com/sc... there are chapters about storing and rendering private files with security, and some cloud stuff

Cheers!

From the official symfony 4 doc:
Using Assetic to manage web assets in Symfony applications is no longer recommended. Instead, use Webpack Encore, which bridges Symfony apps with modern JavaScript-based tools to manage web assets.

Hey Yann,

Yeah, better to use Webpack Encore instead of Assetic these days. Thanks for sharing this paragraph! And we have a free course about Webpack Encore here: https://symfonycasts.com/sc...

Cheers!

The only thing that left is logs. Try to find something in windows event viewer it's not very easy, but there can be logged php error which cause this fail. It helps me earlier.

I just the same problem, and the cause was

"zlib.output_compression = On"

I commented it and everything is ok now.

Hey Everton Júnior

Thanks for sharing your solution, hope it will help!

Cheers!

Interesting. I'm not sure but it looks like PHP throws errors in http headers, try to run server with default php.ini without additional extensions. Really don't know how to properly debug this situation, I had something like this some time ago and it was caused by php configuration.

@rlazarotto Hi!
Could you please provide your local environment information:
OS, PHP version and additional PHP extensions installed?

Hey Lazarotto!

Thank you for such detailed response, it helped much! Unfortunately, it's pretty weird problem that though I'm not sure about how to solve. I suppose you run this website with built in Symfony web server, i.e. "bin/console server:run", right? If so, you did everything correct: correctly included assets with asset() function, your source code in browser looks perfect, and I see you have all the assets you linked in the public/ directory. But if you run your website in a different way, please, try to use "bin/console server:run" instead.

To debug it further, here're some of my thoughts:

1. Could you try to open the website using local IP instead of "localhost", i.e. open
   "http://127.0.0.1:8000/" in Chrome, does it look the same?
2. Please, open "http://127.0.0.1:8000/css/style.css" file - do you see its content in the browser? Also, open the Chrome Debug toolbar - do you see any errors in Network / Console / etc. tabs?
3. The last but not least, I see you don't use PhpStorm, so probably your text editor / IDE use invalid encoding. I'd recommend you to open this project in PhpStorm, and create a new stylesheets (important to create this file in PhpStorm, not in your current text editor), e.g. "public/css/test.css" and include this file in your template like:

<link rel="stylesheet" href="{{ asset('css/test.css') }}" type="text/css">

Add some basic styles so you can see changes in the browser and open the website. Do you see the same net::ERR_INVALID_HTTP_RESPONSE problem for this test.css file?

I hope it helps to figure out the problem.

Cheers!

Hey Lazarotto,

Hm what about other browsers? Does it work there? Could you show us how you include the assets? Are you talking about JS, CSS, images? I wonder to see the line how you include them in your template. Btw, could you also debug URLs? What URL causes the net::ERR_INVALID_HTTP_RESPONSE error?

Cheers!

Hi Guys,
Here how I can use assets <img src="/theme/front/images/posts/{{ blog.picture }}') }}">
I have this in for []
Thanks.

Hey Student,

You have a single quote after "{{ blog.picture }}", I suppose that should be removed ;)

Cheers!

Hi all,
Exp. blog.picture value is "sample.jpg", how I can here use assets()
<img src="theme/front/images/posts/{{ blog.picture }}"/>
Thanks.

Hey Student!

Good question! Here's how this image will look like with Twig asset() function:

<img src="{{ asset('theme/front/images/posts/' ~ blog.picture) }}"/>

So as you can see, you need to get rid of curly braces inside twig expressions, and that tilda char ("~") is the same as dot in PHP files, i.e. it's just a concatenation operator.

Cheers!

Hi! A big thanks for this tutorial i love symfony so much! This is THE framework i was looking for.
But i have a problem in this chapter. I was looking for a solution but not yet solved.
I do exactly the same that you in the tutorial but i have an error message.
I installed Symfony 4.1 website-skeleton and this is the message i get: "An exception has been thrown during the rendering of a template ("Asset manifest file "/Applications/MAMP/htdocs/Github/php-symfony-practice/public/build/manifest.json" does not exist.")."
Any advice?

Hey Szklenár Ferenc!

Ah! I'm so happy to hear that! The further you get into Symfony, the more rewarding it will be :).

So, funny story about that error. I caused it :). We recently made a change to a recipe (I approved it) for one of the core Symfony packages. It had an unintended consequence, and you're seeing it! Basically, the manifest.json file is related to Webpack Encore: a tool in the Symfony world that we're not talking about in this tutorial (but we DO have a tutorial on Encore, and Encore is great!). By default, because website-skeleton installs Encore, Encore requires this file to be present. I think we're going to remove Encore by default (https://github.com/symfony/website-skeleton/pull/31), which will solve this problem. Later, when you install Encore, you will of course go through all the steps needed, which will ultimately create this required manifest.json file.

The fix is this:

composer remove encore

That will remove the package & the configuration files that are causing this error. Later, when you're ready to use Encore, you can just reinstall it, follow the docs and... boom! You're good to go :).

Let me know if this helps!

Cheers!

Hi, first thanks for the great tutorial. But where i can get the Demo HTML / CSS Files? I can't find a download link.
Thanks

Hey Joni,

Thank *you*! If you're talking about start/ and finish/ directories with the code from this screencast - you can find "Download" button in the top right corner of this page, then see "Course code" link. But this feature is available to our subscribers or course owners only. If you don't have a subscription - you can find the start code in our public repo, see https://github.com/knpunive...

Let me know if I understand you wrong.

Cheers!