Crea tu primer proyecto con Symfony 4, Webpack Encore y Bootstrap Sass

Cuando nos enfrentamos al inicio de un proyecto a medida siempre tenemos que tomar la difícil decisión de qué herramientas utilizar para ponernos manos a la obra con el desarrollarlo. Desde acceseo afrontamos muchos tipos de proyectos desarrollados a medida y una de nuestras herramientas preferidas para tener una base que nos permita acortar los plazos de entrega es Symfony, que con su reciente versión 4 y la llegada de Symfony Flex posibilita más si cabe que se adapte a proyectos de cualquier tamaño, desde integraciones de ERPs o creación de pequeñas APIs hasta aplicaciones web completas. Si quieres convencerte de usar Symfony, te recomendamos que leas nuestro anterior post «Por qué desarrollar tu proyecto con Symfony«.

Una vez decidimos el framework sobre el que vamos desarrollar la aplicación necesitamos saber qué herramientas vamos a utilizar en el frontend y sin duda alguna uno de los pilares fundamentales en este área para cualquier proyecto que no cuente con un diseño elaborado (una pequeña intranet por ejemplo) es Bootstrap, desde su llegada de la mano de los ingenieros de Twitter redujo la complejidad de la tarea de maquetación de interfaces sencillas y agradables al mínimo.

¿Y para qué necesitamos Webpack entonces? Webpack + Webpack Encore será la herramienta que nos ayudará a procesar y simplificar el flujo de trabajo con nuestros recursos estáticos (en este ejemplo css/js).

Por tanto el ejemplo que vamos a desgranar a continuación utiliza Symfony4 para el backend, Bootstrap para el frontend y Webpack para la gestión de estáticos.

Prerequisitos

• PHP 7.2
• Composer
• Yarn

Una vez tengamos todo esto instalado en nuestra máquina podemos empezar.

Creación de una aplicación con Symfony 4

Una de las formas aconsejadas por Sensio Labs para crear una aplicación web Symfony 4 con necesidades estándar es utilizar el skeleton que ponen a nuestra disposición, para ello solo tenemos que crear un proyecto con Composer basado en la plantilla website-skeleton, en este ejemplo llamaremos webpack-sf4 al proyecto.

Una vez ejecutado este comando tendremos un proyecto nuevo en la carpeta webpack-sf4. No vamos a necesitar un servidor HTTP ya que durante el proceso de desarrollo podemos utilizar el servidor que incorpora PHP para servir la aplicación, además para simplificar la tarea existe un bundle específico de Symfony que podremos instalar de la siguiente forma.

Llegados a este punto ya podemos ejecutar nuestra aplicación lanzando el siguiente comando desde dentro de la carpeta webpack-sf4 y accediendo a la url localhost:8000

Lo único que veremos en nuestro navegador es un error, que nos indicará que la aplicación está funcionando pero no ha podido servir la petición que hemos hecho, esto es porque no hay lógica definida para ninguna ruta en la aplicación, para ello vamos a crear un controlador muy simple que sirva una plantilla muy sencilla también.

Crearemos el fichero src/Controller/DefaultController.php con el siguiente contenido.

Y el fichero templates/default/index.html.twig con el siguiente contenido.

Si recargamos la página ya podemos ver nuestro mensaje en pantalla sin estilo ni interacción.

Instalación Webpack Encore

Para integrar Bootstrap en nuestro proyecto vamos a hacer uso de Webpack Encore que tendremos que instalar y configurar.
Vamos a instalar el paquete a través de Yarn con el siguiente comando.

Ahora todo lo que necesitamos es configurar correctamente la integración con Webpack y cuando lo tengamos todo funcionando instalaremos nuestras dependencias, en este caso Bootstrap Saas. Para ello vamos a crear el fichero SASS que albergará nuestro CSS y el fichero JS que nos servirá de punto de entrada a la aplicación.

Crearemos el assets/css/app.scss con el siguiente contenido.

Y el fichero assets/js/app.js con el siguiente contenido.

Ahora debemos configurar el proceso de build en Webpack y modificar la plantilla base para que el sistema reconozca la salida del proceso de build de los ficheros estáticos.

Para lo primero debemos añadir las dependencias que vamos a necesitar al utilizar SASS con el siguiente comando.

Ahora configuraremos el fichero webpack.config.js con las siguientes directivas.

Y añadiremos al fichero templates/base.html.twig los enlaces a nuestros ficheros.

Ahora sí podemos acceder de nuevo a localhost:8000 esperando ver nuestros flamantes colores corporativos en el mensaje que hemos escrito, pero nos encontraremos con dos errores 404 correspondientes a los ficheros app.css y app.js que acabamos de incluir en nuestra plantilla base.

Para corregir los errores debemos lanzar el siguiente comando que hará que se generen los ficheros a partir de los que hemos creado en la carpeta assets.

Nota: Si lanzamos yarn run encore dev –watch el sistema estará pendiente de los cambios que hagamos en los ficheros e irá regenerando los ficheros que enlazamos en nuestra plantilla para tener los cambios disponibles.

Ahora sí, podemos observar los cambios pero algo falla, nos falta Bootstrap para que todo se vea bien y el tooltip se muestre al hacer hover sobre el texto.

Bootstrap

Hasta ahora el proceso de setup puede que haya sido un poco complejo para tener una página con un simple H1 y apenas unas líneas de CSS pero la verdadera potencia de la tupla Webpack Encore / Yarn se hace patente cuando empezamos a utilizar dependencias en nuestros proyectos. Del mismo modo que usamos Composer para gestionar nuestras dependencias del proyecto PHP podemos utilizar Yarn para gestionar los paquetes necesarios CSS/JS.

Para importar Bootstrap en nuestro proyecto solo tendremos que ejecutar.

Con la primera línea importamos las dependencias de Bootstrap y posteriormente la librería como tal. Ahora tendremos que descomentar la siguiente línea del fichero webpack.config.js

Con esta línea Webpack Encore se encarga de facilitar jQuery a Bootstrap, ahora importaremos la parte CSS de Bootstrap desde nuestro fichero assets/css/app.scss cargándola al principio del mismo.

Modificaremos nuestro fichero assets/js/app.js para importar la parte JS de Bootstrap y ejecutar nuestro tooltip con el siguiente contenido.

Una vez hecho esto podemos generar de nuevo nuestros ficheros utilizando los mismos comandos que antes o esperamos a que se regeneren automáticamente si hemos utilizado el flag –watch, ahora sí podemos recargar la web y ver en funcionamiento tanto el CSS como el JS de Bootstrap, todo ello en nuestro proyecto con la última versión de Symfony y gestionando los recursos de la mejor manera posible.

Conclusión

Si queremos poder ofrecer la mayor calidad en el menor tiempo de desarrollo nos tenemos que apoyar en las herramientas que nos ofrece la comunidad, es posible que los procedimientos que hemos descrito en el artículo puedan ser un poco complejos al principio pero una vez interiorizado su uso vamos a poder utilizar en nuestros proyectos infinidad de paquetes que dotarán nuestro trabajo de la calidad y velocidad de desarrollo necesaria en cada caso.