Web Assets

Warning: You are browsing the documentation for Symfony 3.x, which is no longer maintained.

Read the updated version of this page for Symfony 7.1 (the current stable version).

Web assets are things like CSS, JavaScript and image files that make the frontend of your site look and work great. Symfony developers have traditionally stored these assets in the Resources/public/ directory of each bundle.

Best Practice

Store your assets in the web/ directory.

Scattering your web assets across tens of different bundles makes it more difficult to manage them. Your designers' lives will be much easier if all the application assets are in one location.

Templates also benefit from centralizing your assets, because the links are much more concise:

        1
2
3
4
5
6
7
        <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}"/>
<link rel="stylesheet" href="{{ asset('css/main.css') }}"/>

{# ... #}

<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
    

Note

Keep in mind that web/ is a public directory and that anything stored here will be publicly accessible, including all the original asset files (e.g. Sass, LESS and CoffeeScript files).

Using Assetic

Caution

Starting from Symfony 2.8, Assetic is no longer included by default in the Symfony Standard Edition. Refer to this article to learn how to install and enable Assetic in your Symfony application.

These days, you probably can't create static CSS and JavaScript files and include them in your template without much effort. Instead, you'll probably want to combine and minify these to improve client-side performance. You may also want to use LESS or Sass (for example), which means you'll need some way to process these into CSS files.

A lot of tools exist to solve these problems, including pure-frontend (non-PHP) tools like GruntJS.

Best Practice

Use Assetic to compile, combine and minimize web assets, unless you're comfortable with frontend tools like GruntJS.

Assetic is an asset manager capable of compiling assets developed with a lot of different frontend technologies like LESS, Sass and CoffeeScript. Combining all your assets with Assetic is a matter of wrapping all the assets with a single Twig tag:

        1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
        {% stylesheets
    'css/bootstrap.min.css'
    'css/main.css'
    filter='cssrewrite' output='css/compiled/app.css' %}
    <link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}

{# ... #}

{% javascripts
    'js/jquery.min.js'
    'js/bootstrap.min.js'
    output='js/compiled/app.js' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}
    

Frontend-Based Applications

Recently, frontend technologies like AngularJS have become pretty popular for developing frontend web applications that talk to an API.

If you are developing an application like this, you should use the tools that are recommended by the technology, such as Bower and GruntJS. You should develop your frontend application separately from your Symfony backend (even separating the repositories if you want).

Learn More about Assetic

Assetic can also minimize CSS and JavaScript assets using UglifyCSS/UglifyJS to speed up your websites. You can even compress images with Assetic to reduce their size before serving them to the user. Check out the official Assetic documentation to learn more about all the available features.

Next: Tests

This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.

TOC

Version