Using Bower for your Symfony2 application

I recently switched to Bower for managing my frontend third party libraries. First I defined some packages that I needed in a bower.json file and put it in the Symfony2 root directory.

{
"name": "MyApp",
"version": "0.1.0",
"dependencies": {
"jquery": "1.10.2",
"Ink": "2.2.1",
"select2": "3.4.3",
"jquery.cookie": "1.4.0"
}
}

Then I told Bower to put the downloaded files in my /web folder. The /web folder makes sense because the /vendor is owned my Composer and the /app/Resources/public is not made for application wide assets like @Bundle/Resources/public is. If you put contents in /app/Resources/public it will not be moved when you do an assets:install or assetic:dump.

An other reason why you should put the files in /web is that the CSS directive @import will not work otherwise. The cssrewrite filter can’t manage to get the correct URLs… so always put you bower components in the web folder.

To tell Bower to put the downloaded files in /web  you need to create a .bowerrc file next to bower.json with the following contents:

{
"directory": "web/bower",
"json": "bower.json"
}

After you do a bower install you may use your new libraries by including them from any twig like:

\{\% javascripts
'bower/jquery/jquery.min.js'
'bower/Ink/js/holder.js'
'bower/Ink/js/ink.min.js'
'bower/Ink/js/ink-ui.min.js'
'bower/Ink/js/autoload.js'
'bower/Ink/js/html5shiv.js'
'bower/select2/select2.min.js'
'bower/select2/select2_locale_sv.js'
'bower/jquery.cookie/jquery.cookie.js'
\%\}
 <script type="text/javascript" src=""></script>
 \{\% endjavascripts \%\}