StencilJS 'dist' vs 'dist-custom-elements': Resolving Asset URLs in Subpath Deployments

StencilJS 'dist' vs 'dist-custom-elements': Resolving Asset URLs in Subpath Deployments

The goal is to ensure that images, fonts, and CSS referenced by components load correctly when a StencilJS application is deployed to a subpath (e.g., /app/) rather than the site root. In development, stencil dev serves components with unminified CSS and absolute URLs, which masks the issue. However, the production build with outputTargets: ['dist', 'dist-custom-elements'] minifies assets and may strip or rewrite relative paths, resulting in 404 errors for assets referenced inside the bundled dist-custom-elements script. The ambiguity lies in how Stencil resolves relative URLs against the script location when the application is served from a non-root path, and whether a configuration option exists to override this behavior.

Key constraints include the need to support static hosting or CDN deployment, the use of relative asset references within component templates, and the lack of explicit documentation for subpath handling in the dist-custom-elements target.

Unresolved questions:

• How can the asset URLs be configured to resolve correctly when the app is served from a subpath?
• Does Stencil provide a configuration option to set a base path for assets in the dist-custom-elements target?
• What build-time transformations are required to adjust relative URLs for subpath hosting?