Skip to content

Dev mode for assetmapper does not serve css files automatically #54520

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cooldude77 opened this issue Apr 8, 2024 · 24 comments
Open

Dev mode for assetmapper does not serve css files automatically #54520

cooldude77 opened this issue Apr 8, 2024 · 24 comments

Comments

@cooldude77
Copy link

cooldude77 commented Apr 8, 2024

Symfony version(s) affected

6.3.12, 7.0.6

Description

Hello Helping folks,

I am coding my app with version 7.0.6 and saw asset mapper being used for delivering CSS.
I added app.css as mentioned in the assets folder of the project.

I am running a simple installation of apache2, php 8.3, mariadb on Ubuntu environment on virtual box

As mentioned here , the assets should be delivered to the web page using an inbuilt controller if the APP_ENV=dev and I don't have to compile them.

Unfortunately, I do not see the assets being delivered to web page in dev environment.

To mitigate it , I compiled the assets ( shouldn't need to ) in dev environment and files were added to my public folder.

I thought maybe I am not doing something correct so I purchased the course given at symfonycast in dev environment but to no luck.

What am I doing wrong here? or is some step missing?
image

Thanks a lot.

How to reproduce

Create any symfony project where asset mapper can be used ( please use dev mode)
Install symfony
Update/create assets/style/app.css and then change some values in css.
The css is not reflected on page load and the upon clicking the js file leads to 404 ( because it is not in public folder)

Possible Solution

Update:
Just found out after lot of debugging and researching, this only works good when we are using symfony local server run using command
symfony server:start
Is there anyway to run it using configurations above( using apache) ?

No response

Additional Context

No response

@smnandre
Copy link
Member

@cooldude77 With Symfony 6.4 or 7.0 you should be able to use the AssetMapper dev server and {{ asset() }}

I created a small repro based on a fresh install and with 2 CSS files

https://github.com/smnandre/repro-asset-css-dev

Maybe that will help you see if you're doing something differently ?

@cooldude77
Copy link
Author

cooldude77 commented Apr 13, 2024

@cooldude77 With Symfony 6.4 or 7.0 you should be able to use the AssetMapper dev server and {{ asset() }}

I created a small repro based on a fresh install and with 2 CSS files

https://github.com/smnandre/repro-asset-css-dev

Maybe that will help you see if you're doing something differently ?

Thanks for the reply and repo
I used the repo and tested it again to see what I was missing.
Here is what I found
I think it works fine when I use a dev server ( symfony start:server ...)
However it fails with apache2 and php ( which I use for my dev env ).
Is there some kind of flag being set for dev server that we need to set for apache ?
One setting I could see in core code was X-ASSET-DEV ( speculation ) .

@smnandre
Copy link
Member

Oh you may have a custom rule in your virtualhost to serve .css file directly maybe ?

@cooldude77
Copy link
Author

custom rule in your virtualhost to serve .css

@smnandre Thanks for your reply. I haven't added any custom rule as it is bare bones apache2 ,php8.3 and mariadb installation on Ubuntu, running on a virtual box on windows 11.
The app is in very early stage of development so nothing out of the box has been done on any environment. All things except asset delivery work nicely.

@smnandre
Copy link
Member

Could you share the content of your virtualhost ?

I'm sorry "custom" was not the good word :)

But i think there is something in the Apache config (probably in the default one) that does not send to the public/index.php requests containing ".css"

@cooldude77
Copy link
Author

cooldude77 commented Apr 13, 2024

Could you share the content of your virtualhost ?

I'm sorry "custom" was not the good word :)

But i think there is something in the Apache config (probably in the default one) that does not send to the public/index.php requests containing ".css"

No problem.
Here is the apache 2 config file . I have not made any changes wrt images

https://pastebin.com/8QshmksR ( not to pollute this issue with code)

Let me know if you need complete virtual box because I will need to check them before I send them to you.

Thanks

@smnandre
Copy link
Member

Nothing here, maybe in the site-enabled/XXX-your-local-domain ? (can be 000-default or somthing like that if you did not add yourself one)

@cooldude77
Copy link
Author

Hey Simon,
I am providing the complete apache2.zip in here, so that you can have a look. I did not knowingly added any thing ( except for adminer) as I still need to learn how to configure apache2 ,lol. So they should be pretty standard.

Please have a look.
apache2.zip

@smnandre
Copy link
Member

Well nothing here seems to have an impact on this i'm sorry .... last chance, do you have a .htaccess in your public directory ? (or the parent one) ?

@cooldude77
Copy link
Author

Nope. I haven't reached to the level on development where I use .htaccess. All my urls for dev always have /public/index.php/{other routes} . I do plan to use .htaccess soon but since it is not immediately necessary , my project does without it. Thanks

@cooldude77
Copy link
Author

cooldude77 commented Apr 13, 2024

image
data is the directory for images that live outside public dir. Right now I am using a controller to serve images , but soon I may need assets

@smnandre
Copy link
Member

smnandre commented Apr 13, 2024

All my urls for dev always have /public/index.php/

Ok... then that's it... i'm very sorry for the long road :/

AssetMapper does indeed not work without URL rewriting at the moment..

@cooldude77
Copy link
Author

cooldude77 commented Apr 13, 2024 via email

@smnandre
Copy link
Member

Thank you for this message :)

@nialltiernan
Copy link

@smnandre, could you please elaborate on your comment:

AssetMapper does indeed not work without URL rewriting at the moment..

Isn't this something that could be handled by a web server such as Apache or NGINX? If I knew what the rules were I would like to try do this myself. Could you share them with me?

Thank you

@smnandre
Copy link
Member

@nialltiernan I'm sorry i'm not sure to fully understand.. :)

What i meant by this quote is: the AssetMapper Dev Server simulates "prod" conditions by responding to requests and returning assets, using the same URL the assets would have in prod (ex: /assets/images/foo-12346ab.png)

As of today, this does not work when URL rewriting* is not enabled locally (something that the symfony-cli does out of the box or every docker local instal provides)

* i used the term "url rewriting", another way could be "forward every http request in a given directory to a PHP front controller"

In production, with a webserver the dev server is disabled and AssetMapper "only" compile and deploy your assets in the assets folder.

What problem are you facing currently ? Is there something in particular you would need help ?

@Fasterpast
Copy link

So now it's impossible to run DEV env on a webserver without cli tools?

@stof
Copy link
Member

stof commented Aug 14, 2024

run composer require symfony/apache-pack. This will make Flex install a recipe creating the .htaccess file with the necessary config for url rewriting.

@Fasterpast
Copy link

Fasterpast commented Aug 14, 2024

I have nginx...
I created a link to assets from public and made a rewrite rule in conf:
location ~* ^/assets/ { rewrite -([A-z0-9]+)\.([A-z]+)$ /$1; }
It's not perfect but works for now...

@smnandre
Copy link
Member

So now it's impossible to run DEV env on a webserver without cli tools?

No one ever told this :)

I have nginx...

Nginx configuration is detailed here: https://symfony.com/doc/current/setup/web_server_configuration.html#nginx

@Fasterpast
Copy link

Fasterpast commented Aug 15, 2024

No one ever told this :)

But it is (from the box).

Nginx configuration is detailed here: https://symfony.com/doc/current/setup/web_server_configuration.html#nginx

There are no any mention about rewrite rules or I can't see it

@hellomedia
Copy link
Contributor

I ran into the same issue in dev where assets were returning a 404 due to nginx config.

The offender was

location ~* \.(js|css|png|jpg|jpeg|gif|webp|ico|eot|svg|ttf|woff)$ {
    expires 1y;
}

A useful config in production, but in dev, it means assets are served directly (which was not obvious to me), bypassing symfony's listener to rewrite the path.

Would it be worth mentioning this in the doc ?

@carsonbot
Copy link

Hey, thanks for your report!
There has not been a lot of activity here for a while. Is this bug still relevant? Have you managed to find a workaround?

@thunder413
Copy link

Hi,
Im facing the same issue any update on this im using apache ?

@carsonbot carsonbot removed the Stalled label May 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

9 participants