Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 9940c65

Browse files
weaverryanweaverryan
committed
feature #5159 Added an article explaining how to use Bower in Symfony (WouterJ)
This PR was merged into the 2.3 branch. Discussion ---------- Added an article explaining how to use Bower in Symfony | Q | A | --- | --- | Doc fix? | no | New docs? | yes | Applies to | all | Fixed tickets | - The documentation was only documenting Assetic to manage assets. I feel like the community is moving away from Assetic and is starting to use tools like Bower, Gulp, Grunt, etc. This first article starts at documenting how to work with these tools within your Symfony application. Commits ------- d34b772 Created Bower article
2 parents 12ed2e6 + d34b772 commit 9940c65

File tree

4 files changed

+129
-0
lines changed

4 files changed

+129
-0
lines changed

‎cookbook/frontend/bower.rst

Lines changed: 117 additions & 0 deletions
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

Lines changed: 7 additions & 0 deletions
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

Lines changed: 1 addition & 0 deletions
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

Lines changed: 4 additions & 0 deletions
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)