tag:blogger.com,1999:blog-13874540541783545572024-03-13T19:22:52.099+02:00CodophonyАндрейhttp://www.blogger.com/profile/12619051006564809981noreply@blogger.comBlogger2125tag:blogger.com,1999:blog-1387454054178354557.post-49790698518082387862012-11-10T19:43:00.000+02:002012-11-14T19:20:35.369+02:00Managing js vendors and symfony 2.1.x<div dir="ltr" style="text-align: left;" trbidi="on">
In <a href="http://codophony.blogspot.com/2012/11/symfony2-and-js-vendors.html">my preveous post</a> I've described how to manage js vendors in symfony2. However that solution is only applicable for version 2.0.x of symfony. In this post I'll describe how to manage js vendors in 2.1.x.<br />
<br />
The idea is the same: load js vendors via symfony's standard mechanism (composer). But load into the folder under web directory.<br />
<a name='more'></a><br />
<h3>
Solution 1. Use ugly names</h3>
Again I will use <a href="https://github.com/molecule-man/ExtJsListbox.git" rel="nofollow">https://github.com/molecule-man/ExtJsListbox.git</a> as an example of js vendor.<br />
Open your composer.json file and add the following line<br />
<blockquote class="tr_bq">
<pre>"../web/vendor/extjs/ux/listbox": "master"</pre>
</blockquote>
to the <code>require</code> array.<br />
<br />
Naming repo in such a way will make composer load vendor scripts under <code>/.../your-symfony-app/web/</code> directory and therefore this scripts will be exposed to browser.<br />
Now all you have to do is add repositories to composer.json:
<br />
<blockquote class="tr_bq">
<script src="https://gist.github.com/4051736.js?file=vendors-js1.json"></script>
<noscript>
<pre>
"repositories": [{
"type": "package",
"package": {
"name": "../web/vendor/extjs/ux/listbox",
"version": "master",
"source": {
"type": "git",
"reference": "master",
"url": "https://github.com/molecule-man/ExtJsListbox.git"
}
}
}]
</pre>
</noscript>
</blockquote>
Now run <code>php composer.phar update</code> and check <code>web/vendor</code> folder if everything loaded ok.<br />
<br />
If this solution looks like a hack to you check out the next solution.<br />
<br />
<h3>
Solution 2. Use scripts to make symlink</h3>
Add line<br />
<blockquote class="tr_bq">
<pre>"js-vendors/extjs/ux/listbox": "master"</pre>
</blockquote>
to the require array of the composer.json file.<br />
<br />
add repositories:<br />
<blockquote class="tr_bq">
<script src="https://gist.github.com/4051736.js?file=vendors-js2.json"></script>
<noscript>
<pre>
"repositories": [{
"type": "package",
"package": {
"name": "js-vendors/extjs/ux/listbox",
"version": "1.0",
"source": {
"type": "git",
"reference": "v1.0",
"url": "https://github.com/molecule-man/ExtJsListbox.git"
}
}
}]
</pre>
</noscript>
</blockquote>
Then add the following line to "post-update-cmd" array:
<br />
<blockquote class="tr_bq">
<script src="https://gist.github.com/4051736.js?file=cmd.json"></script>
<noscript>
<pre>
"ln -s ../vendor/js-vendors ./web/vendor"
</pre>
</noscript>
</blockquote>
After running <code>php composer.phar update</code> there will be symlink created in web folder referring to <code>vendor/js-vendors</code> directory (however under linux only. For windows you will have to use windows' command for creating symlink).<br />
<br />
P.S. Don't forget to add <code>web/vendor</code> into <code>.gitignore</code><br />
<br />
P.P.S. This is how my composer.json looks:<br />
<blockquote class="tr_bq">
<script src="https://gist.github.com/4051736.js?file=composer.json"></script>
<noscript>
<pre>
{
"name": "symfony/framework-standard-edition",
"description": "The \"Symfony Standard Edition\" distribution",
"autoload": {
"psr-0": { "": "src/" }
},
"require": {
"php": ">=5.3.3",
"symfony/symfony": "2.1.*",
"doctrine/orm": ">=2.2.3,<2.4-dev",
"doctrine/doctrine-bundle": "1.0.*",
"twig/extensions": "1.0.*",
"symfony/assetic-bundle": "2.1.*",
"symfony/swiftmailer-bundle": "2.1.*",
"symfony/monolog-bundle": "2.1.*",
"sensio/distribution-bundle": "2.1.*",
"sensio/framework-extra-bundle": "2.1.*",
"sensio/generator-bundle": "2.1.*",
"jms/security-extra-bundle": "1.2.*",
"jms/di-extra-bundle": "1.1.*",
"js-vendors/extjs/ux/listbox": "1.x"
},
"scripts": {
"post-install-cmd": [
"Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::buildBootstrap",
"Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::clearCache",
"Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::installAssets",
"Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::installRequirementsFile"
],
"post-update-cmd": [
"Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::buildBootstrap",
"Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::clearCache",
"Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::installAssets",
"Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::installRequirementsFile",
"ln -s ../vendor/js-vendors ./web/vendor"
]
},
"minimum-stability": "dev",
"extra": {
"symfony-app-dir": "app",
"symfony-web-dir": "web"
},
"repositories": [{
"type": "package",
"package": {
"name": "js-vendors/extjs/ux/listbox",
"version": "1.0",
"source": {
"type": "git",
"reference": "v1.0",
"url": "https://github.com/molecule-man/ExtJsListbox.git"
}
}
}]
}
</pre>
</noscript>
</blockquote>
</div>Андрейhttp://www.blogger.com/profile/12619051006564809981noreply@blogger.com2tag:blogger.com,1999:blog-1387454054178354557.post-30025089527355603262012-11-10T14:38:00.000+02:002012-11-23T12:40:39.401+02:00Symfony2 and js vendors<div dir="ltr" style="text-align: left;" trbidi="on">
How to deal with vendor javascripts in symfony2?<br />
Moreover, how to make installing/updating js vendor as easy as possible?<br />
<a name='more'></a>I think I've found suitable solution. But first let's talk about alternatives.<br />
<br />
<h4>
Alternative 1. Js-vendors containing bundle</h4>
You simply could create bundle the main purpose of which would be to contain js vendors in its <code>Resources/public/js</code> folder.<br />
However this alternative is not an option as <a href="http://symfony.com/doc/current/cookbook/bundles/best_practices.html#vendors" rel="nofollow">Symfony cookbook</a> explicitly states that<br />
<blockquote class="tr_bq">
<span style="background-color: white;"><span style="font-family: inherit;"><i>A bundle should not embed third-party libraries written in JavaScript, CSS, or any other language.</i></span></span></blockquote>
<h4>
Alternative 2. Load js vendors via deps</h4>
Also you can use symfony's standard mechanism for vendors loading. <br />
Put the following lines into the deps file<br />
<blockquote class="tr_bq code">
<pre>[ExtJsListBox]
git=https://github.com/molecule-man/ExtJsListbox.git
target=/js-vendors/extjs/ux/listbox
</pre>
</blockquote>
After running command
<blockquote class="tr_bq cmd">
<pre>
php bin/vendors install
</pre>
</blockquote>
js vendor will be loaded into <code>/path/to/app/vendor/js-vendors/extjs/ux/listbox</code>.<br />
The next step is to make vendor scripts accessible. They should be dumped into some folder under your <code>web</code> folder. One way of doing it is to use <a href="http://symfony.com/doc/current/cookbook/assetic/asset_management.html#assets" rel="nofollow">Assetic bundle</a>:
<br />
<blockquote class="tr_bq">
<noscript>
<pre>{% javascripts
'../vendor/js-vendors/extjs/ux/listbox/Listbox.js'
'../vendor/js-vendors/extjs/ux/listbox/Panel.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
</pre>
</noscript>
<script src="https://gist.github.com/4050958.js?file=js-vendors.twig"></script>
</blockquote>
So this solution enables you to quickly install new js vendor (by adding only three lines into <code>deps</code> file and running install command). However in a case if your frontend application loads scripts dynamically things become complicated.<br />
<br />
<h2>
The solution</h2>
The solution is to use the deps file but rather than load vendor scripts into <code>vendors</code> folder load them into <code>web/vendors</code> folder:<br />
<blockquote class="tr_bq code">
<pre>[ExtJsListBox]
git=https://github.com/molecule-man/ExtJsListbox.git
target=../web/vendors/extjs/ux/listbox
</pre>
</blockquote>
After installing vendors (<code>php bin/vendors install</code>) vendor scripts are accessible from a browser (you can check it entering <code>http://yourapp/vendors/extjs/ux/listbox/Panel.js</code> into url bar).<br />
<br />
P.S. Don't forget to add <code>web/vendors</code> into <code>.gitignore</code><br />
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 <a href="http://codophony.blogspot.com/2012/11/symfony2-1-x-and-js-vendors.html">next post</a>.</div>Андрейhttp://www.blogger.com/profile/12619051006564809981noreply@blogger.com1