Ronny López

Random thoughts on Symfony, Redis, Web Development and Life.

Managing web assets in Symfony2 with Bower

| Comments

In a typical Symfony2 application, web assets are handled elegantly by taking advantage of the asset Twig function or by using another library, called Assetic, which allows you to do much more interesting things with those assets.

If you follow the bundles directory structure conventions, then you should put your web assets (images, scripts, stylesheets, etc) in the Resources/public/ directory inside your bundle.

Although Assetic and the asset function will do the rest of the work for you (copying, linking, combining, filtering and dumping assets) you still have to manage your assets dependencies by hand.

Composer become the core dependency manager for Symfony 2.1 and beyond. It is a dependency management library for PHP, it was created for handling PHP dependencies, but NOT for handling front-end (assets) dependencies.

So, how do we manage the dependencies of our web assets?

Having to manually download and keep updated all front-end dependencies is a very tedious task.

Bower to the rescue

Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you.

Bower is just a package manager, and nothing else. It does not offer the ability to combine, concatenate or minify code, it’s sole purpose is to manage packages.

Using the Bower component.json file

Just as we have a composer.json file with our PHP dependencies, you can create a component.json file in your project’s root, specifying all front-end dependencies.

Sample component.json file.
1
2
3
4
5
6
7
8
9
10

{
  "name": "Acme Application",
    "version": "1.0.0",

    "dependencies": {
      "jquery": "~1.7.2",
      "bootstrap": "latest",
      "undersocre": "~1.4.2"
      }
}

Install Bower in your development environment, and the same way we do with Composer, do bower install or bower update.

By default, Bower will install packages in the components directory, so we need to change its default configuration to follow Symfony2 conventions.

Configuring Bower for Symfony2 applications

Bower can be configured by creating a .bowerrc file in your project´s root with one or all of the following configuration parameters:

.bowerrc configuration file
1
2
3
4
5

{
    "directory" : "src/Acme/DemoBundle/Resources/public",
    "json"      : "component.json",
    "endpoint"  : "https://bower.herokuapp.com"
}

With the above configuration, once you do bower install or bower update, the packages will be copied to the src/Acme/DemoBundle/Resources/public directory as specified in the .bowerrc file.

Using the packages installed by Bower

Remember, Bower is just a package manager, so there’s no Bower-specific way to use these packages. So, we’ll just stick with the Symfony2 way of linking to assets in the bundle Resources/public directory (using asset or Assetic).

We just reference the assets as we have always do.

1
2
3
4
5
6

{% stylesheets
    '@AcmeDemoBundle/Resources/public/bootstrap/less/bootstrap.less'
    '@AcmeDemoBundle/Resources/public/bootstrap/less/responsive.less'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

Conclusion and next steps

So, that´s all. Bower just will help us to manage our client-side/front-end dependencies in a Symfony2 application or inside our bundle.

The next challenge would be to include Bower commands in our deploy process so that we can have packages automatically downloaded and installed during deploys.

Dependencies management sucks, that´s a fact. We already have composer to manage PHP libraries and bundles dependencies. I am very happy to have an elegant client-side dependency manager as well!

References

Comments