This post is going to show us how to install and enable css, js, images like assets in out application. For more details, visit How to Use Assetic for Asset Management page.


Install


Run composer require symfony/assetic-bundle command, add new Symfony\Bundle\AsseticBundle\AsseticBundle(), to "AppKernel.php" and put lines below to "config.yml" file.


assetic:
debug: '%kernel.debug%'
use_controller: '%kernel.debug%'
bundles: [FootballFrontendBundle]
read_from: "%kernel.root_dir%/../web"
write_to: "%kernel.root_dir%/../web"
filters:
cssrewrite: ~

Current structure


application
app
Resources
views
base.html.twig
src
Football
FrontendBundle
Resources
public
css
site.css
js
site.js
images
football.png
views
Default
index.html.twig
web
...

base.html.twig


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
{% stylesheets '@FootballFrontendBundle/Resources/public/css/*' %}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
{% javascripts '@FootballFrontendBundle/Resources/public/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
</body>
</html>

index.html.twig


{% extends '::base.html.twig' %}

{% block body %}
{% image '@FootballFrontendBundle/Resources/public/images/football.png' %}
<img src="{{ asset_url }}" alt="Logo" />
{% endimage %}
<p>Home</p>
{% endblock %}

Create assets


$ php bin/console assetic:dump --env=dev --no-debug

Dumping all dev assets.
Debug mode is off.

18:19:04 [dir+] /var/www/html/football/app/../web/images
18:19:04 [file+] /var/www/html/football/app/../web/images/7f83373.png
18:19:04 [dir+] /var/www/html/football/app/../web/css
18:19:04 [file+] /var/www/html/football/app/../web/css/88ab7e4.css
18:19:04 [dir+] /var/www/html/football/app/../web/js
18:19:04 [file+] /var/www/html/football/app/../web/js/0565161.js

Updated structure


application
...
...
web
css
88ab7e4.css
js
0565161.js
images
7f83373.png

Inspect page


# http://192.168.99.10:8081/app_dev.php/

<link rel="stylesheet" href="/app_dev.php/css/88ab7e4_part_1_site_1.css">

<img src="/app_dev.php/images/7f83373_football_1.png" alt="Logo" />

<script src="/app_dev.php/js/0565161_part_1_site_1.js"></script>