Include jQuery into Symfony2

Solution 1:

Assuming your jquery.min.js is placed under src/Acme/FooBundle/Resources/public/js/

You can use either

<script type="text/javascript" src="{{ asset('bundles/acmefoo/js/jquery.min.js') }}"></script>

{% javascripts
    '@AcmeFooBundle/Resources/public/js/jquery.min.js'
%}
    <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

Into your twig template.

Make sure you installed the assets afterwards or run this command

php app/console assets:install web --symlink

Solution 2:

There are several ways to include jQuery in a Symfony project. You can:

1. Install jQuery with a front-end package manager (Bower)

The Symfony documentation states:

Bower is a dependency management tool for front-end dependencies, like Bootstrap or jQuery.

If Bower isn't already installed, you can install it globally with npm (require node):

npm install -g bower

According to the Symfony documentation:

A bundle should not embed third-party libraries written in JavaScript, CSS or any other language.

So, we store jQuery directly in the web/ directory which is publicly accessible. To tell Bower where to install packages, create a .bowerrc file in your Symfony project root with this content:

{
    "directory": "web/assets/vendor/"
}

Execute bower init in your project root to create bower.json which will define installed packages. Type enter for every question to answer the default value (select 'globals' for the type of modules).

Bower is ready to install jQuery in your project:

bower install --save jquery

Now you can include jQuery in your template:

<script src="{{ asset('assets/vendor/jquery/dist/jquery.min.js') }}"></script>

Currently Bower does not have a "lock" feature like on Composer. That's why you should probably commit the assets downloaded by Bower instead of adding the directory to your .gitignore file. This will probably change in the future: bower/bower#1748.

2. Install jQuery with Composer

Even if Composer is a dependency manager for PHP, you can also use it to install jQuery.

To make Composer able to install components like components/jquery, you need first to add the component-installer:

composer require robloach/component-installer

Then modify your composer.json file to include:

"require": {
    "components/jquery": "3.1.1"
},
"config": {
    "component-dir": "web/assets/vendor"
},

and execute composer install. This will install jQuery in the web/assets/vendor directory.

You can then include jQuery in your template:

<script src="{{ asset('assets/vendor/jquery/jquery.min.js') }}"></script>

3. Include jQuery from a CDN

For example with Google CDN:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

About advantages and disadvantages to using a CDN, I suggest you to read this page.

In all cases:

To make sure your scripts (which require jQuery) will work, jQuery has to be loaded first. So, depending on your page loading requirements, you should either:

include jQuery just before you need it, or
include it in the <HEAD>, or
use defer in your scripts