Otro día más, otro post más, siguiendo con la serie de tutoriales de iniciación a Symfony. Ahora estamos repasando en Symfony cómo incluimos los ficheros en las páginas web. Es decir, 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.
Enlazo aquí a los códigos fuentes de toda la serie por si los estás siguiente:
https://github.com/jaimenj/symfony-starter-tutorials
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í:
symfony new symfony-tutorial-8 cd symfony-tutorial-8/ composer require --dev maker
Ya podemos arrancar el servidor de desarrollo local así:
symfony 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:
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 DefaultController
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: 'ver=v123'
Y accediendo a la página veremos lo siguiente en el navegador:
Esto es todo y es bastante a la vez. Es decir, que en poco tiempo y pocas líneas de código fuente escrito se puede hacer mucho con Symfony.
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.
Aquí puedes seguir con el siguiente tutorial de iniciación, también me remito una vez más a la documentación oficial que está muy bien y puede seguir avanzando más con este tema:
https://symfony.com/doc/current/components/asset.html
Dejo aquí los códigos fuentes de este post:
https://github.com/jaimenj/symfony-starter-tutorials
