Saturday, November 10, 2012

Symfony2 and js vendors

How to deal with vendor javascripts in symfony2?
Moreover, how to make installing/updating js vendor as easy as possible?
I think I've found suitable solution. But first let's talk about alternatives.

Alternative 1. Js-vendors containing bundle

You simply could create bundle the main purpose of which would be to contain js vendors in its Resources/public/js folder.
However this alternative is not an option as Symfony cookbook explicitly states that
A bundle should not embed third-party libraries written in JavaScript, CSS, or any other language.

Alternative 2. Load js vendors via deps

Also you can use symfony's standard mechanism for vendors loading.
Put the following lines into the deps file
[ExtJsListBox]
    git=https://github.com/molecule-man/ExtJsListbox.git
    target=/js-vendors/extjs/ux/listbox
After running command
php bin/vendors install
js vendor will be loaded into /path/to/app/vendor/js-vendors/extjs/ux/listbox.
The next step is to make vendor scripts accessible. They should be dumped into some folder under your web folder. One way of doing it is to use Assetic bundle:
So this solution enables you to quickly install new js vendor (by adding only three lines into deps file and running install command). However in a case if your frontend application loads scripts dynamically things become complicated.

The solution

The solution is to use the deps file but rather than load vendor scripts into vendors folder load them into web/vendors folder:
[ExtJsListBox]
    git=https://github.com/molecule-man/ExtJsListbox.git
    target=../web/vendors/extjs/ux/listbox
After installing vendors (php bin/vendors install) vendor scripts are accessible from a browser (you can check it entering http://yourapp/vendors/extjs/ux/listbox/Panel.js into url bar).

P.S. Don't forget to add web/vendors into .gitignore
P.P.S This solution is only applicable for symfony2.0.x. The solution for symfony 2.1.x (which uses composer) is described in the next post.

1 comment:

  1. i was just browsing along and came upon your blog. just wanted to say good blog and this article really helped me.

    Error Code 6

    ReplyDelete