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

Skip to content

Commit 38a11f6

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

File tree

3 files changed

+136
-0
lines changed

3 files changed

+136
-0
lines changed

‎cookbook/frontend/bower.rst

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
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 Twitter Bootstrap
9+
or jQuery. Since Symfony isn't purely a back-end framework, it can't deliver
10+
you much help with Bower. Fortunately, it is very easy to use!
11+
12+
Installing Bower
13+
----------------
14+
15+
Bower_ is build on top of NodeJS_. 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 BowerPHP_
28+
for an unofficial PHP port. Beware that this is still in an alpha state. If
29+
you're using BowerPHP, use ``bowerphp`` instead of ``bower`` in the
30+
examples.
31+
32+
Configuring Bower in your Project
33+
---------------------------------
34+
35+
By default, Bower will install all front-end dependencies in a
36+
``bower_packages/`` in the root of your project. In Symfony, only the ``web/``
37+
directory has public access, so you have to configure Bower to install it in
38+
the ``web/`` directory instead.
39+
40+
A common practice is to put your front-end dependencies in
41+
``web/assets/vendor/``. You can configure this directory in a ``.bowerrc`` file
42+
in the root of your project. It's using the JSON syntax:
43+
44+
.. code-block:: json
45+
46+
{
47+
"directory": "web/assets/vendor/"
48+
}
49+
50+
It is also recommended to create a ``bower.json`` file which will hold your
51+
projects front-end dependencies (just like ``composer.json`` for Composer). You
52+
can create an empty file or use ``bower init`` to fill in some information
53+
about your project.
54+
55+
An Example: Installing Bootstrap
56+
--------------------------------
57+
58+
Believe it or not, but you're now ready to use Bower in your Symfony
59+
application. As an example, you'll now install bootstrap in your project and
60+
include it in your layout.
61+
62+
Installing the Dependency
63+
~~~~~~~~~~~~~~~~~~~~~~~~~
64+
65+
The first step obviously is to install bootstrap. You can do this by executing
66+
``bower install``:
67+
68+
.. code-block:: bash
69+
70+
$ bower install --save bootstrap
71+
72+
This will install Bootstrap and its dependencies in ``web/assets/vendor/`` (or
73+
another directory you configured).
74+
75+
It'll also save the package name and a version constraint in the ``bower.json``
76+
you created. This means you don't have to commit ``web/assets/vendor/`` (just
77+
like you didn't commit the ``vendor/`` directory). After deploy, you just run
78+
``bower install`` to install all required packages. Use ``bower update`` to
79+
install the latest version (that matches the version constraint).
80+
81+
Including the Dependency in your Template
82+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
83+
84+
Now the dependencies are installed, you can include bootstrap in your template
85+
like normal CSS/JS:
86+
87+
.. configuration-block::
88+
89+
.. code-block:: html+jinja
90+
91+
{# app/Resources/views/layout.html.twig #}
92+
<!doctype html>
93+
<html>
94+
<head>
95+
{# ... #}
96+
97+
<link rel="stylesheet"
98+
href="{{ asset('assets/vendor/bootstrap/dist/css/bootstrap.min.css') }}">
99+
</head>
100+
101+
{# ... #}
102+
</html>
103+
104+
.. code-block:: html+php
105+
106+
<!-- app/Resources/views/layout.html.php -->
107+
<!doctype html>
108+
<html>
109+
<head>
110+
{# ... #}
111+
112+
<link rel="stylesheet" href="<?php echo $view['assets']->getUrl(
113+
'assets/vendor/bootstrap/dist/css/bootstrap.min.css'
114+
) ?>">
115+
</head>
116+
117+
{# ... #}
118+
</html>
119+
120+
Great job! Your site is now using Bootstrap. You can now easily upgrade
121+
bootstrap to the latest version and manage other front-end dependencies too.
122+
123+
.. _Bower: http://bower.io
124+
.. _NodeJS: https://nodejs.org
125+
.. _BowerPHP: http://bowerphp.org/

‎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/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)