Symfony 2 and Bootstrap 3 Assetic Config and Base HTML Template

This doesn’t mean much standalone, but it’s here for future reference.

# Assetic Configuration
assetic:
    debug:          %kernel.debug%
    use_controller: false
    bundles:        [ ]
    java: /usr/bin/java
    filters:
        cssrewrite: ~
        cssembed:
          jar: %kernel.root_dir%/Resources/java/cssembed-0.4.5.jar
        yui_js:
          jar: %kernel.root_dir%/Resources/java/yuicompressor.jar
        lessphp:
          file: %kernel.root_dir%/../vendor/leafo/lessphp/lessc.inc.php
          apply_to: "\.less$"
    assets:
        jquery_js:
            inputs:
                - '%kernel.root_dir%/../components/jquery/jquery.min.js'
            filters: [?yui_js]
        bootstrap_js:
            inputs:
                - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/transition.js'
                - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/alert.js'
                - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/modal.js'
                - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/dropdown.js'
                - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/scrollspy.js'
                - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/tab.js'
                - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/tooltip.js'
                - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/popover.js'
                - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/button.js'
                - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/collapse.js'
                - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/carousel.js'
                - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/affix.js'
            filters: [?yui_js]
        bootstrap_less:
            inputs:
                - '%kernel.root_dir%/../vendor/twitter/bootstrap/less/bootstrap.less'
            filters: [lessphp,cssembed]

Original source from Joeri Verdeyen, slightly modified for Bootstrap 3.


< html>
< head>
    < title>{% block title %}Bootstrap 101 Template{% endblock %}< /title>
    < meta name="viewport" content="width=device-width, initial-scale=1.0">
    

    {% block stylesheets %}
        {% stylesheets '@bootstrap_less' combine=true %}
            
        {% endstylesheets %}
    {% endblock %}

    
    
< /head>
< body>

    {% block myBody %}
    {% endblock %}

    {% block javascripts %}
        {% javascripts '@jquery_js' '@bootstrap_js' filter='?yui_js' combine=true %}
            
        {% endjavascripts %}
    {% endblock %}
< /body>
< /html>

(Sorry, had to put the spaces in to get the whole thing to show. Silly WordPress. Thanks also Gzom!)

Be Sociable, Share!

18 thoughts on “Symfony 2 and Bootstrap 3 Assetic Config and Base HTML Template”

  1. Hi, could you please give us an update to this post? When following your video tutorial on setting up Bootstrap 3, lessphp throws an error: [Exception]
    parse error: failed at `&:extend(.clearfix all); /app/../vendor/twitter/bootstrap/less/mixins.less on line 648

    There’s a youtube comment by someone saying they got around this by using node.js instead of less.php but the exact steps are unclear..

    Thank you very much for your work!

    1. I would imagine a possible workaround for this would be to change your composer.json file twitter/bootstrap line to:

      “twitter/bootstrap”: “v3.0.3”

      And then re-run composer update, then cache:clear (just to be safe), then assetic dump –force.

      The issue being that in the video bootstrap will be pulling from master branch, which has this bug you are experiencing. If you switch back to the branch above – or whichever I am using in the video, that bug is not going to manifest itself.

      Let me know if you’re still having trouble after that.

      Thanks

      Chris

        1. Had the same issue, solved it by replacing leafo less with something similar.

          In your compoers.json:
          remove:
          “leafo/lessphp”: “*”

          and replace with:
          “oyejorge/less.php”: “dev-master”,

          In the above Assetic config, use the following path for lessphp (@Chris, please update your config)
          %kernel.root_dir%/../vendor/oyejorge/less.php/lessc.inc.php

          1. @Arjan, I wasn’t able to track down why my results were different from the video until I read your post. Thank you.

  2. Nice tutorial, helped me a lot with setting up Symfony and Bootstrap

    You have an error in your base twig file (the one on the top of this page. Line 4 doesn’t have a closing title tag (your missing )

    Thanks again and keep up the good work!

  3. Good tutorial,
    That allowed me to configure Bootstrap.
    However, I do not manage to integrate the example of Caroussel,
    Please you could help me

  4. Still missing closing tag for title (damn wp) and don’t forget to change block body to block bodyBlah or vice verse.
    πŸ™‚

  5. Great tutorial! Keep up the good work!
    I think I found one more bug in the settings above though. The jquery path is missing the vendor folder:
    ‘%kernel.root_dir%/../components/jquery/jquery.min.js’
    should be:
    ‘%kernel.root_dir%/../vendor/components/jquery/jquery.min.js’

  6. Also, can you please make a tutorial on how to set up and use Symfony with Bootstrap, Jquery and Sass (instead of Less)? Would be a great help!

  7. Hello Christopher and thanks for your post.
    Is this still a viable solution if I don’t want to use CDNs with Bootstrap and Foundation?

    I looked at your video in comments but I don’t like the idea of using CDN links instead of source scss files.

    Thanks.

    1. Hi Luca,

      Thanks for the comment & question.

      I can’t see any reason why it wouldn’t still work, but I tend to always use a CDN link in new projects so can’t say with 100% certainty.

      This is still quite an outdated method now. I would advise using a tool like gulp to concatenate and minify your CSS and JS files, and serve just two files. You can pull in all your third party dependencies still (Bootstrap / Foundation, etc) and this way, avoid having to rely on CDNs.

      Hope that helps, but let me know if unclear.

      Thanks

      Chris

      1. Hello,
        thanks for your answer!

        I can confirm to you that this solution works seamlessly with Symfony 3. In our team we are still using Assetic and so the Gulp/Grunt solution is not viable at the moment.

        In your opinion do you think that sooner or later Symfony will prefer solutions such as as the ones you mentioned (Bower, Grunt, Gulp etc…) and so it would be wise to convince my team to do the switch?

        Thanks.

        1. Hi Luca,

          Thanks for leaving the update πŸ™‚ Much appreciated.

          As with many development problems, in my opinion, it depends on the type of project, and the team you have.

          From my point of view, if your entire project is PHP / Symfony / twig, with simple asset requirements then Assetic is still an easy option, as it’s right there for you when you install a new Symfony project. Likewise, if your entire team know and understand Assetic, and it meets your needs then don’t change purely for the sake of change.

          However, for most projects I would recommend using a modern front end build system – Gulp being my preference currently.

          There are waaaay more people using Gulp / Grunt / etc than will ever use Assetic. Most anything you need to do will have already got a library, or component to pull in and get you going. I find using Gulp easier to maintain than working with Assetic once a project grows to any reasonable size. It also forces you to learn a bit of JavaScript (whether that’s a good thing, or bad thing is another debate :D)

          The other big plus point for me is that if your project is split into front end and back end teams, the front end guys will (likely) already know Gulp, and this is really a front end problem, so use a modern front end solution.

          Ultimately, if you have something that works, and changing it isn’t going to get you anything other than a few good feelings about using new and shiny tech, then stick with what works.

          I hope that helps in some way πŸ™‚

          Chris

Leave a Reply

Your email address will not be published. Required fields are marked *

This blog is kept spam free by WP-SpamFree.