diff --git a/cookbook/frontend/bower.rst b/cookbook/frontend/bower.rst new file mode 100644 index 00000000000..4a9c28e13c6 --- /dev/null +++ b/cookbook/frontend/bower.rst @@ -0,0 +1,117 @@ +.. index:: + single: Front-end; Bower + +Using Bower with Symfony +======================== + +Symfony and all its packages are perfectly managed by Composer. Bower is a +dependency management tool for front-end dependencies, like Bootstrap or +jQuery. As Symfony is purely a back-end framework, it can't help you much with +Bower. Fortunately, it is very easy to use! + +Installing Bower +---------------- + +Bower_ is built on top of `Node.js`_. Make sure you have that installed and +then run: + +.. code-block:: bash + + $ npm install -g bower + +After this command succeeded, run ``bower`` in your terminal to find out if +it's installed correctly. + +.. tip:: + + If you don't want to have NodeJS on your computer, you can also use + BowerPHP_ (an unofficial PHP port of Bower). Beware that this is still in + an alpha state. If you're using BowerPHP, use ``bowerphp`` instead of + ``bower`` in the examples. + +Configuring Bower in your Project +--------------------------------- + +Normally, Bower downloads everything into a ``bower_components/`` directory. In +Symfony, only files in the ``web/`` directory are publicly accessible, so you +need to configure Bower to download things there instead. To do that, just +create a ``.bowerrc`` file with a new destination (like ``web/assets/vendor``): + +.. code-block:: json + + { + "directory": "web/assets/vendor/" + } + +An Example: Installing Bootstrap +-------------------------------- + +Believe it or not, but you're now ready to use Bower in your Symfony +application. As an example, you'll now install Bootstrap in your project and +include it in your layout. + +Installing the Dependency +~~~~~~~~~~~~~~~~~~~~~~~~~ + +To create a ``bower.json`` file, just run ``bower init``. Now you're ready to +start adding things to your project. For example, to add Bootstrap_ to your +``bower.json`` and download it, just run: + +.. code-block:: bash + + $ bower install --save bootstrap + +This will install Bootstrap and its dependencies in ``web/assets/vendor/`` (or +whatever directory you configured in ``.bowerrc``). + +.. seealso:: + + For more details on how to use Bower, check out `Bower documentation`_. + +Including the Dependency in your Template +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +Now that the dependencies are installed, you can include bootstrap in your +template like normal CSS/JS: + +.. configuration-block:: + + .. code-block:: html+jinja + + {# app/Resources/views/layout.html.twig #} + + +
+ {# ... #} + + + + + {# ... #} + + + .. code-block:: html+php + + + + + + {# ... #} + + + + + {# ... #} + + +Great job! Your site is now using Bootstrap. You can now easily upgrade +bootstrap to the latest version and manage other front-end dependencies too. + +.. _Bower: http://bower.io +.. _`Node.js`: https://nodejs.org +.. _BowerPHP: http://bowerphp.org/ +.. _`Bower documentation`: http://bower.io/ +.. _Bootstrap: http://getbootstrap.com/ diff --git a/cookbook/frontend/index.rst b/cookbook/frontend/index.rst new file mode 100644 index 00000000000..3bfa8e75b17 --- /dev/null +++ b/cookbook/frontend/index.rst @@ -0,0 +1,7 @@ +Front-end +========= + +.. toctree:: + :maxdepth: 2 + + bower diff --git a/cookbook/index.rst b/cookbook/index.rst index 03d29060c7f..7ad4360e21b 100644 --- a/cookbook/index.rst +++ b/cookbook/index.rst @@ -17,6 +17,7 @@ The Cookbook email/index event_dispatcher/index form/index + frontend/index logging/index profiler/index request/index diff --git a/cookbook/map.rst.inc b/cookbook/map.rst.inc index 6c8e5d59d89..6add8f23695 100644 --- a/cookbook/map.rst.inc +++ b/cookbook/map.rst.inc @@ -107,6 +107,10 @@ * (validation) :doc:`/cookbook/validation/custom_constraint` * (doctrine) :doc:`/cookbook/doctrine/file_uploads` +* :doc:`/cookbook/frontend/index` + + * :doc:`/cookbook/frontend/bower` + * :doc:`/cookbook/logging/index` * :doc:`/cookbook/logging/monolog`