Le routage dans une application “SPA” fonctionne sous Node.js ou en “Server Side Rendering”. Comment faire quand on doit utiliser un serveur Web/J2EE?
Svelte, Apache TomEE et routage SPA
Introduction
Dans l’article Svelte, routage sans déroute, on avait vu comment mettre en place le routage au sein d’une application SPA. Sauf qu’il y a un petit souci: ce type de routage fonctionne sous Node.js ou en “Server Side Rendering”. Comment faire quand on doit utiliser un serveur Web/J2EE?
Svelte: mise en place du routage
On va utiliser ici la librairie “svelte routing” (documentation sur GitHub: https://github.com/EmilTholin/svelte-routing). L’installation se fait via NPM:
|
|
Ensuite, dans la page principale Svelte, on ajoute ces éléments:
|
|
On peut bien sûr ajouter autant de tag <Route>
que nécessaire: il suffit d’inclure le composant lié et de gérer l’url dédiée. Ensuite, pour changer de page (en fait le composant puisque le serveur TomEE n’est pas mis à contribution), il faut faire un navigate(url, { replace: true });
Le navigateur affiche alors l’url demandée (exemple: http://serveur/app/spa/login).
TomEE: redirection SPA
Une fois qu’on a navigué vers la page avec navigate
, on croit que tout va bien. Mais si on recharge la page, le browser va effectuer une requête auprès du serveur (dans notre exemple, le serveur va devoir servir la page /app/spa/login). Sauf que cette url n’est pas connue de la WebApp et notre serveur TomEE retourne une erreur 404. On va donc rediriger les urls de type /app/spa vers la page d’accueil de l’application en lui indiquant quel est le composant demandé.
Pour rediriger les urls dans TomEE, il y a 3 petites étapes à effectuer: ajouter une dépendance au pom.xml, configurer le web.xml et ajouter la configuration des redirections dans le fichier WEB-INF/urlrewrite.xml.
pom.xml
On va ajouter le package org.tuckey.urlrewritefilter. La documentation se trouve sur http://www.tuckey.org/urlrewrite/.
|
|
web.xml
On ajoute un filtre qui se chargera de rediriger les urls configurées.
|
|
WEB-INF/urlrewrite.xml
|
|
Ici, %{context-path}
représente l’url de base de la WebApp (/app/ dans notre exemple).
Svelte: interception de la redirection
Dans notre composant principal, on va lire le paramètre “page” dans le QueryString de l’url (3 cas: paramètre manquant, sans valeur et avec valeur).
|
|
Conclusion
Moyennant peu de code, il est facile d’héberger une application “Single Page App” réalisée avec Svelte.