How to use EAP with Single Page Applications that demand internally routed URLs not be 'not found'?

Solution Verified - Updated -

Environment

EAP 7.2

Issue

Single Page Applications sometimes have 'internal' routers that manage navigation in the browser. As an example, a web application might be served a big HTML file from EAP, then the user might navigate to a URL something like ' http://www.mysite.com/heroes/42' where 'heroes' and '42' are handled without leaving the browser. The server doesn't have these resources and can't serve them. (See details at [1])

Problems arise when the user makes use of the 'back' button, cached browser URLs, URLs that are persisted in emails, etc. Without the loaded application in the browser, the requested resource does not exist so EAP will respond with 'not found'. How can this be avoided?

[1] https://angular.io/guide/deployment

Resolution

Undertow offers 'rewrite' facilities that can be used to rewrite the incoming request. This can be done at the server or application level, application is probably best. This is accomplished with a file /WEB-INF/undertow-handlers.conf

The exact configuration needed will differ by application. Useful articles describing the necessary configurations can be found at [1] and [2].

[1] https://stackoverflow.com/questions/44978074/how-do-i-configure-undertow-handlers-to-support-proper-rewriting-for-spa-bookmar
[2] https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#issue-my-assets-and-templates-are-not-loading

This solution is part of Red Hat’s fast-track publication program, providing a huge library of solutions that Red Hat engineers have created while supporting our customers. To give you the knowledge you need the instant it becomes available, these articles may be presented in a raw and unedited form.