On a fait fonctionner le routage de type “SPA” avec Apache TomEE mais un problème subsiste: les ressources statiques (images, etc) ne s’affichent pas.

Introduction

Dans l’article “Svelte, Apache TomEE et routage SPA”, on a vu comment faire fonctionner le routage de type “SPA” lorsque l’application est hébergée sur un serveur applicatif tel que Apache TomEE. Mais un problème subsiste: les ressources dites statiques (telles que les images) subissent le routage et ne s’affichent pas…

Analyse du problème

Lorsqu’on lance le build de la partie front-end avec npm, Svelte va construire un fichier Javascript avec toutes les ressources utilisées et un autre fichier CSS selon la même logique. Mais les images ne sont pas traitées par ce processus (elles ne sont pas inclues dans les composants via un “import”). Ces images sont tout de même présentes dans le fichier WAR final construit par Maven mais il n’est pas possible d’écrire une adresse qui va satisfaire à la fois TomEE et le routage de Svelte.

Exemple

Dans le dossier /pages, on trouve deux sous-dossiers /html et /img. Dans un composant /pages/html/test.html on ajoute une image comme ceci:

<img src="../img/image.png">

TomEE va comprendre que l’adresse réelle est http:/serveur/projet/pages/img/image.png. On se dit que c’est OK. Sauf que le routage Svelte entre en jeu et le “../” dans l’adresse de l’image est remplacé par html/test.html (l’adresse du composant). Et du coup l’adresse demandée pour l’image devient http:/serveur/projet/pages/html/test.html#img/image.png et l’image est introuvable.

Solution

Dans le fichier WEB-INF/web.xml, on va modifier la réécriture d’adresses comme suit (en jaune):

Puis dans le fichier WEB-INF/urlrewrite.xml, on ajoute les lignes en jaune:

    
1<rule>
2    <note>Transfer all urls starting with /img/ to folder /project/final/images</note>
3    <from>/img/(.*)</from>
4    <to type="redirect">%{context-path}/project/final/images/$1</to>
5</rule>

Ainsi toutes les adresses en /projet/img/* seront redirigées vers /projet/project/final/images/*. Dans notre exemple, il faut alors modifier la balise img comme ceci:

<img src="/projet/img/image.png">

Et bien sûr, dans le script de build, il faut copier les images du dossier /pages/img/* vers /project/final/images.

Conclusion

Le module UrlRewriteFilter nous avait permis de résoudre le problème de routage SPA et ici il permet encore une fois de profiter des capacités de Apache TomEE et de Svelte sans prise de tête.