Symfony: tutorial 8: los assets

Symfony Assets

Otro día más, otro post más, ahora repasando en Symfony 4 cómo incluimos los ficheros en las páginas web. A saber, los assets son los ficheros CSS, Javascript e imágenes que usamos en el front-end. Ahora se ha simplificado un poco más todo el manejo de éstos.

Podemos evitarnos el cacheado en los navegadores dándoles un número o nombre de versión a todos los assets. Así con cada despliegue, configuramos un número nuevo de versión de assets, y se le añadirá la coletilla a los ficheros assets incluidos en toda la web. Esto forzará a los navegadores a descargarse la nueva versión de estos assets.

También con assets nos evitamos el problema de mantener las URLs relativas o absolutas. Simplemente podemos poner la ruta desde la que se accede al asset y Symfony se encargará de poner la ruta. Sea donde sea que tengamos la aplicación Symfony, en directorio principal o no, se generará la ruta que corresponde sin dar enlaces 404.

Además, tiene funcionalidades para el manejo de CDNs con diferentes nombres de hosts. Vamos a comenzar que es más sencillo que lo que parece.

Creando el proyecto de pruebas en Symfony

Para hacer un par de pruebas y ver qué tal se maneja esto podemos crear un proyecto nuevo con composer haciendo así:

composer create-project symfony/skeleton symfony-assets
cd symfony-assets/
composer require --dev maker server

Ya podemos arrancar el servidor de desarrollo local así:

php bin/console server:start

..y en el navegador podremos ver los resultados si todo a ido bien aquí: http://localhost:8000/

Si todo ha ido bien veremos algo como lo siguiente:

symfonyAssets1defaultController

Creando un controlador para tener un Twig de pruebas

Lo siguiente es crear un controlador, tendremos que instalar algunos paquetes de Composer. Los indispensables para este post son los siguientes:

composer require twig asset annotations

Ahora podemos crear el controlador, yo le he llamado DefaultController:

php bin/console make:controller

Esto nos habrá creado los ficheros templates/default/index.html.twig y src/Controller/DefaultController.php que podremos editarlos a continuación para ver qué sencillo es usar los assets.

Usando los assets con la plantilla Twig

Lo siguiente que tenemos son una serie de funciones, para ver las principales editamos el fichero templates/default/index.html.twig y vemos los resultados:

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

{% block body %}

<a href="{{ asset('css1.css') }}">{{ asset('css1.css') }}</a><br>
<a href="{{ absolute_url(asset('css1.css')) }}">{{ absolute_url(asset('css1.css')) }}</a><br>
Asset version: {{ asset_version('css1.css') }}

{% endblock %}

Ahora podemos acceder con el navegador a http://localhost:8000/default pero antes vamos a versionar los assets. Para versionar simplemente añadimos en el fichero config/packages/framework.yaml esto:

framework:
    assets:
        version: v123

Y accediendo a la página veremos lo siguiente en el navegador:

Symfony assets 2

Esto es todo y es mucho a la vez..

Aclaraciones, qué ha pasado

Para empezar, fíjate que simplemente usando la función de Twig llamada {{ asset(‘nombreFichero.extension’) }} ya podemos independizar el proyecto del directorio en donde esté. Simplemente ponemos todos los ficheros usando esta función y dará igual en qué directorio desplegamos el proyecto después, tanto si es el principal como si se trata de un subdirectorio dentro de un WordPress, por ejemplo.

Seguimos con el versionado de los assets, que definiendo la versión actual en el fichero de configuración, esto forzará al navegador a descargarse el fichero más actualizado si es que se ha cacheado. Esto es un dolor de cabeza menos cuando pasas a producción el proyecto.

Las siguientes dos funciones absolute_url y asset_version son otras formas de usar los assets, quizá queremos compartir la URL.

Esto es el principio, porque se ha incluido el Webpack Encore, que ayudará al desarrollo del front. Ayudará con una gestión más avanzada en la gestión de las librerías, y mucho más, pero esto es para otro post.

Compartir..

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

cuatro × tres =