How to include JavaScript files into twig template using Symfony2

Question

I can easily include CSS files into my twig template like this:

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('bundles/user/css/bootstrap.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/user/css/bootstrap-theme.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/user/css/main.css') }}"/>
{% endblock %}

But for my JavaScript files

{% block javascripts %}
    <script src="{{ asset('bundles/user/js/jquery-1.11.3.min.js') }}"></script>
    <script src="{{ asset('bundles/user/js/bootstrap.min.js') }}"></script>
{% endblock %}

The approach does not work. I tried to use assetics too, but that didn't work either.

Did you do app/console assets:install ?

Cyrille
– Cyrille

2015-08-23 20:11:46 +00:00
Commented Aug 23, 2015 at 20:11 — Cyrille
– Cyrille, Commented Aug 23, 2015 at 20:11

lxg · Accepted Answer · 2017-07-04 08:34:27Z

13

I'd recommend the Assetic approach. It's not exactly simple, but it gives you huge benefits.

First, embed your JS in a template like this:

{% block my_javascripts %}
    {% javascripts
        '@FooBarBundle/Resources/public/js/foo.js'
        '@FooBarBundle/Resources/public/js/bar.js'

        filter='?uglifyjs2'
    %}
    <script src="{{ asset_url }}" type="text/javascript"></script>
    {% endjavascripts %}
{% endblock %}

Add as many JS files as you like.

Now run the following on the command line:

app/console assetic:dump

In your dev environment, this will generate a copy of your JS files within the document root. In your prod, this will generate one combined file in the doc root – the first benefit.

To have your files generated automatically in the background while you edit them, run the following from the command line, and keep it running until you're done (cancel then with Ctrl+C):

app/console assetic:watch --force

(The --force option causes Assetic to generate the files even if it there don't seem to be any modifications.)

Another benefit is the filter='uglifyjs2' statement: It causes the files to be "compressed" with UgilifyJS, which loads much faster.

Read more about using Assetic for JS and CSS in Symfony2 in the cookbook.

edited Jul 4, 2017 at 8:34

answered Aug 23, 2015 at 20:17

lxg

13.2k13 gold badges56 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user4383363 Over a year ago

Thanks, it worked. Sadly, I really have to specify each file, otherwise jQuery will not be called first. I have a question. Can I put the CSS and JS files directly into /web? Or is it really necessary to put inside of Bundle's public folder?

lxg Over a year ago

If you want to have jQ loaded first, try renaming the file to 000.jquery.js (just a guess, don't know if they are included in alphabetical order).

lxg Over a year ago

You should not put JS/CSS directly into ./web. Better put them into the public folder and have them copied with app/console assets:install. But in this case, the public path will be something like /bundles/yourbundle/css/…. This, however, has nothing to do with Assetic, it's the Symfony-internal way of managing assets. (A bit confusing, but you'll get the idea.)

Collectives™ on Stack Overflow

How to include JavaScript files into twig template using Symfony2

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related