Problems with Assetic in dev environment (solved)

Talking about Symfony2

A couple of months ago I started with working with the Symfony2 PHP framework and I must say I really love it I’ve built several applications using it since. But I’ve not been smart at all… I’m still using an alpha version of the SF2 framework, while 2.0.6 is already out in the open. Time to upgrade! Much has changed since one of the first alpha versions release. Mostly for the better I must say and a lot of new addition were made.

One of those additions is the Assetic library, created by Kris Wallsmith (@kriswallsmith on twitter). Assetic is an asset management framework. Assetic enables you to use a variety of third-party tools that will help bring order to your application’s JavaScripts, style sheets and images, at least, that’s what the project description says. To me, it’s currently one major pain in the ass.

Combining and minification of your separate stylesheets and JavaScripts into one file is one of the listed (and documented) examples of Assetic. But is it me or is this broken? Whatever I try I always seem to run into this error:

An exception has been thrown during the rendering of a template (“Route “_assetic_664ddb5_0″ does not exist.”) in /var/www/symfony-standard/src/Acme/DemoBundle/Resources/views/layout.html.twig at line 5.

After working with a lot of documentation and examples, I gave up. Finally it hit me, keep it simple, let’s install the Symfony-standard distribution and try it on the demo it comes with. Guess what?! Same problem!

Let me show you what I did to reproduce the problem. First install the symfony-standard distribution and get it up and running! Easy enough.Then open file ‘/src/Acme/DemoBundle/Resources/views/layout.html.twig’. In this file you will find this follow line of code:

<link rel="stylesheet" href="{{ asset('bundles/acmedemo/css/demo.css') }}" type="text/css" media="all" />

Now read the “How to Use Assetic for Asset Management” from the Symfony2 Cookbook. It tell’s you can let your JavaScripts and style sheets easily combined with Assetic. To do that, you need to change the above line into this:

{% stylesheets
    '@AcmeDemoBundle/Resources/public/css/demo.css'
%}
    <link rel="stylesheet" href="{{ asset_url }}" type="text/css" media="all" />
{% endstylesheets %}

We can’t really call this combining, since there is only one style sheet, but that’s not the point. Now when you try to visit the demo page (in the dev environment), the page is broken with the error I’ve posted above. What is wrong here? I’m on dev right? So the assets should be generated on the fly right? According to the manual it is:

By default, each asset path generated in the dev environment is handled dynamically by Symfony. This has no disadvantage (you can see your changes immediately), except that assets can load noticeably slow.

I’m I really that stupid? Or is it simply broken? I’ve tried it on IRC, no luck. I’ve posted my question on the Symfony2 Google group, no luck either.

The above is the only thing I changed in the Symfony-standard distribution. Nothing else was touched. Assetic is configured in the config_dev.yml to use the dynamic controller:

assetic:
    use_controller: true

And it’s also configured in the routing_dev.yml file:

_assetic:
    resource: .
    type: assetic

To me this all looks fine. I’ve also tried clearing the cache, dumping the assets and installing the assets, no luck either, the error keeps occurring.

php app/console --env=dev cache:clear --no-debug
php app/console --env=dev assetic:dump --no-debug
php app/console --env=dev assets:install web --no-debug

So now what? Who gives me the golden ticket that allows me to fix this problem?

../Frenck

Update: The solution

So @kriswallsmith was kind enough to support me via Twitter. Below the conversation that solved my problem:

kriswallsmith

(Kris Wallsmith)

@Frenck what is your assetic config in config.yml? On 7-12-2011 19:58:55 from Twitter for Mac in reply to Franck Nijhof

Frenck

(Franck Nijhof)

@kriswallsmith It's an untouched symfony-standard (with the exception of the template). This is (my) config.yml: http://t.co/Dc51IO5v On 7-12-2011 20:26:27 from TweetDeck in reply to Kris Wallsmith

kriswallsmith

(Kris Wallsmith)

@Frenck you need to add your bundle to assetic.bundles to it knows to scan there On 7-12-2011 20:26:54 from Twitter for Mac in reply to Franck Nijhof

Frenck

(Franck Nijhof)

@kriswallsmith added bundles: [ AcmeDemoBundle ], problem persists. Also http://t.co/L7Gt2cMD states that all registered by default On 7-12-2011 20:41:44 from TweetDeck in reply to Kris Wallsmith

kriswallsmith

(Kris Wallsmith)

@Frenck You need to clear the cache to rebuild the router. If you had "bundles: []" that means none were being scanned. On 7-12-2011 20:55:14 from Twitter for Mac in reply to Franck Nijhof

Frenck

(Franck Nijhof)

@kriswallsmith Wow! Indeed, well thank you! This should be noted somewhere (http://t.co/6hQiPvip). Gonna update my blog :) On 7-12-2011 20:57:44 from TweetDeck in reply to Kris Wallsmith

kriswallsmith

(Kris Wallsmith)

@Frenck glad i could help :) On 7-12-2011 20:58:04 from Twitter for Mac in reply to Franck Nijhof

So now you know! If you are having this problem, check your configuration, add the needed bundles to Assetic, clear your cache and voila

Thanks for your quick help Kris!

../Frenck

Tags: assetic, css, javascript, symfony2, twig