Contenido Estático en Spring Boot

Una de las dudas más comunes que suele surgir a la hora de empezar a trabajar con un proyecto Spring Boot es la de dónde se debe ubicar el contenido estático que queremos utilizar en nuestra aplicación. Suele dar bastantes quebraderos de cabeza y en realidad es un tema relativamente sencillo.

 

 

Contenido estático es todo aquel que permanece de forma fija en una determinada página web y que, por tanto, no puede ser modificado por el usuario. Sólo podrá ser cambiado o eliminado por el desarrollador, operando directamente en la estructura del proyecto software. Los contenidos estáticos más comunes de un proyecto suelen ser los archivos de imágenes, los ficheros de estilo CSS y los ficheros Javascript. 

 

Ubicación del contenido estático de Spring Boot

Lo primero que tenemos que saber es que, por defecto, Spring ya tiene una ubicación predefinida para guardar el contenido estático. Se trata del siguiente directorio de nuestro proyecto:

src/main/resources/static/

Por tanto, si queremos que nuestro proyecto Spring Boot pueda acceder a un determinado contenido estático, bastaría con situar la imagen, el Javascript o el CSS en el directorio /static o en cualquier subdirectorio que cuelgue de /static.

Por ejemplo, podríamos tener la siguiente estructura en el proyecto:

 

¿Y cómo podemos acceder a ese contenido estático? Bueno, supongamos que queremos recuperar la información de un fichero denominado "miestilo.css" y situado en el directorio "src/main/resources/static". Básicamente, tenemos la información almacenada en la siguiente ruta:

src/main/resources/static/miestilo.css

En este escenario, desde nuestro JSP tendremos que indicar un acceso al endpoint:

/miestilo.css

👉 Por si no ha quedado del todo claro, ponemos otro ejemplo: supongamos que tenemos una imagen guardada en el directorio src/main/resources/static/images.

src/main/resources/static/images/campo_futbol.jpg

En este caso, desde el JSP tendremos que especificar también el subdirectorio e indicar que hay que acceder al endpoint:

/images/campo_futbol.jpg

Lo que acabo de explicar parece una tontería, pero os sorprendería la cantidad de desarrolladores que se han pasado horas y horas tratando de desentrañar este "misterio". Cuando uno llega nuevo al mundo Spring Boot tiene que cambiar el chip y adaptarse a su infraestructura.

Configuración del contenido estático de Spring Boot

 

Dicho lo anterior, hay que mencionar que también tenemos la posibilidad de cambiar la ubicación por defecto del contenido estático. Como la mayoría de las cosas en Spring Boot, este directorio también es parametrizable. Y como nos podemos imaginar, esta configuración se establecerá mediante el fichero de propiedades Spring Boot:

Para realizar dicha configuración, tendríamos que incluir en este properties el siguiente parámetro:

spring.resources.static-locations

Y, por supuesto, a continuación indicar la ruta del directorio en el que queremos que esté ubicado el contenido estático de nuestro proyecto.

Por ejemplo, podemos definir la siguiente propiedad:

 

spring.resources.static-locations=classpath:/personal/

Esta propiedad le está indicando a Spring Boot que tiene que buscar el contenido estático en el siguiente directorio del proyecto.

src/main/resources/personal/

👉 Imaginemos que, con esa configuración, ubicamos el archivo imagen vidriera.jpg en el subdirectorio /imagenes/ que cuelga del directorio /personal/, esto es, en la siguiente ruta:

src/main/resources/personal/imagenes/vidriera.jpg

Entonces desde nuestros JSP el endpoint de acceso sería el siguiente:

/imagenes/vidriera.jpg

Con lo comentado, ya nos debería quedar una idea más o menos definida de cómo debemos configurar el contenido estático en Spring Boot para no tener problemas de acceso en nuestro proyecto. Tengamos en cuenta que la idea de fondo de Spring Boot es la de tratar de estandarizar la estructura del proyecto para evitar problemas adicionales de arquitectura y que podamos centrarnos totalmente en el desarrollo del mismo. Por tanto, tratemos de aprovecharnos al máximo de dicha estandarización...

Saludos.