Skip to content

Commit d34b772

Browse files
wouterjwouterj
committed
Created Bower article
1 parent 0dc6204 commit d34b772

File tree

4 files changed

+129
-0
lines changed

4 files changed

+129
-0
lines changed

‎cookbook/frontend/bower.rst

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
.. index::
2+
single: Front-end; Bower
3+
4+
Using Bower with Symfony
5+
========================
6+
7+
Symfony and all its packages are perfectly managed by Composer. Bower is a
8+
dependency management tool for front-end dependencies, like Bootstrap or
9+
jQuery. As Symfony is purely a back-end framework, it can't help you much with
10+
Bower. Fortunately, it is very easy to use!
11+
12+
Installing Bower
13+
----------------
14+
15+
Bower_ is built on top of `Node.js`_. Make sure you have that installed and
16+
then run:
17+
18+
.. code-block:: bash
19+
20+
$ npm install -g bower
21+
22+
After this command succeeded, run ``bower`` in your terminal to find out if
23+
it's installed correctly.
24+
25+
.. tip::
26+
27+
If you don't want to have NodeJS on your computer, you can also use
28+
BowerPHP_ (an unofficial PHP port of Bower). Beware that this is still in
29+
an alpha state. If you're using BowerPHP, use ``bowerphp`` instead of
30+
``bower`` in the examples.
31+
32+
Configuring Bower in your Project
33+
---------------------------------
34+
35+
Normally, Bower downloads everything into a ``bower_components/`` directory. In
36+
Symfony, only files in the ``web/`` directory are publicly accessible, so you
37+
need to configure Bower to download things there instead. To do that, just
38+
create a ``.bowerrc`` file with a new destination (like ``web/assets/vendor``):
39+
40+
.. code-block:: json
41+
42+
{
43+
"directory": "web/assets/vendor/"
44+
}
45+
46+
An Example: Installing Bootstrap
47+
--------------------------------
48+
49+
Believe it or not, but you're now ready to use Bower in your Symfony
50+
application. As an example, you'll now install Bootstrap in your project and
51+
include it in your layout.
52+
53+
Installing the Dependency
54+
~~~~~~~~~~~~~~~~~~~~~~~~~
55+
56+
To create a ``bower.json`` file, just run ``bower init``. Now you're ready to
57+
start adding things to your project. For example, to add Bootstrap_ to your
58+
``bower.json`` and download it, just run:
59+
60+
.. code-block:: bash
61+
62+
$ bower install --save bootstrap
63+
64+
This will install Bootstrap and its dependencies in ``web/assets/vendor/`` (or
65+
whatever directory you configured in ``.bowerrc``).
66+
67+
.. seealso::
68+
69+
For more details on how to use Bower, check out `Bower documentation`_.
70+
71+
Including the Dependency in your Template
72+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
73+
74+
Now that the dependencies are installed, you can include bootstrap in your
75+
template like normal CSS/JS:
76+
77+
.. configuration-block::
78+
79+
.. code-block:: html+jinja
80+
81+
{# app/Resources/views/layout.html.twig #}
82+
<!doctype html>
83+
<html>
84+
<head>
85+
{# ... #}
86+
87+
<link rel="stylesheet"
88+
href="{{ asset('assets/vendor/bootstrap/dist/css/bootstrap.min.css') }}">
89+
</head>
90+
91+
{# ... #}
92+
</html>
93+
94+
.. code-block:: html+php
95+
96+
<!-- app/Resources/views/layout.html.php -->
97+
<!doctype html>
98+
<html>
99+
<head>
100+
{# ... #}
101+
102+
<link rel="stylesheet" href="<?php echo $view['assets']->getUrl(
103+
'assets/vendor/bootstrap/dist/css/bootstrap.min.css'
104+
) ?>">
105+
</head>
106+
107+
{# ... #}
108+
</html>
109+
110+
Great job! Your site is now using Bootstrap. You can now easily upgrade
111+
bootstrap to the latest version and manage other front-end dependencies too.
112+
113+
.. _Bower: http://bower.io
114+
.. _`Node.js`: https://nodejs.org
115+
.. _BowerPHP: http://bowerphp.org/
116+
.. _`Bower documentation`: http://bower.io/
117+
.. _Bootstrap: http://getbootstrap.com/

‎cookbook/frontend/index.rst

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
Front-end
2+
=========
3+
4+
.. toctree::
5+
:maxdepth: 2
6+
7+
bower

‎cookbook/index.rst

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ The Cookbook
1717
email/index
1818
event_dispatcher/index
1919
form/index
20+
frontend/index
2021
logging/index
2122
profiler/index
2223
request/index

‎cookbook/map.rst.inc

+4
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,10 @@
107107
* (validation) :doc:`/cookbook/validation/custom_constraint`
108108
* (doctrine) :doc:`/cookbook/doctrine/file_uploads`
109109

110+
* :doc:`/cookbook/frontend/index`
111+
112+
* :doc:`/cookbook/frontend/bower`
113+
110114
* :doc:`/cookbook/logging/index`
111115

112116
* :doc:`/cookbook/logging/monolog`

0 commit comments

Comments
 (0)