OmniFaces Showcase

This ResourceHandler implementation will set the SourceMap response header with the correctly mapped request path to any discovered source map of any CSS and JS resource.

By default, CSS and JS minifiers will embed the path to the source map in a comment like as the below one in our own omnifaces.js.

//# sourceMappingURL=omnifaces.js.map

The web browser will then attempt to resolve this against the current request URL, but this would fail with a 404 error because the Faces mapping such as *.xhtml is missing.

In order to sovle that, first configure your minifier to disable writing the # sourceMappingURL comment, otherwise that would still take precedence over the SourceMap response header, and register the SourceMapResourceHandler in faces-config.xml as below.

<application>
    <resource-handler>org.omnifaces.resourcehandler.SourceMapResourceHandler</resource-handler>
</application>

By default, the SourceMapResourceHandler will use *.map pattern to create the source map URL. In other words, it's expected that the source map file is located in exactly the same folder and has the .map extension. In case you need a different pattern, e.g. sourcemaps/*.map, then you can set that via the "org.omnifaces.SOURCE_MAP_RESOURCE_HANDLER_PATTERN" context parameter.

<context-param>
    <param-name>org.omnifaces.SOURCE_MAP_RESOURCE_HANDLER_PATTERN</param-name>
    <param-value>sourcemaps/*.map</param-value>
</context-param>

Note that the SourceMap response header will only be set when the target source map file actually exists.