[Bug]: Hosting on non-root path URI broken after 0.26.1

[mdecker]

The Problem

Hosting/running on a non-root URI like "/spdf" breaks the whole experience in versions after 0.26.1 by introducing absolute paths for js and css dependencies. As far as I can tell commit f43fe15193ce257245221472e34336cdf4983cf8 broke this.

PS: I haven't checked further, but includes for icons, etc. are likely also impacted by this.

Version of Stirling-PDF

0.28.1

Last Working Version of Stirling-PDF

0.26.1

Page Where the Problem Occurred

http://localhost/spdf/

Docker Configuration

No response

Relevant Log Output

No response

Additional Information

includes in home from 0.26.1 (working):

    <!-- jQuery -->
    <script src="js/thirdParty/jquery.min.js"></script>
    <script src="js/thirdParty/jquery.validate.min.js"></script>
    <script src="js/thirdParty/jszip.min.js"></script>

    <!-- Bootstrap -->
    <script src="js/thirdParty/popper.min.js"></script>
    <script src="js/thirdParty/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="css/bootstrap-icons.min.css">

    <!-- PDF.js -->
    <script type="module" src="./pdfjs-legacy/pdf.mjs"></script>

    <!-- PDF-Lib -->
    <script src="js/thirdParty/pdf-lib.min.js"></script>

    <!-- Custom -->
    <link rel="stylesheet" href="css/general.css">
    <link rel="stylesheet" href="css/theme/theme.css">
    <link rel="stylesheet" href="css/theme/componentes.css">
    <link rel="stylesheet" href="css/theme/theme.light.css" id="light-mode-styles">
    <link rel="stylesheet" href="css/theme/theme.dark.css" id="dark-mode-styles">
    <link rel="stylesheet" href="css/rainbow-mode.css" id="rainbow-mode-styles" disabled>
    <link rel="stylesheet" href="css/tab-container.css">
    <link rel="stylesheet" href="css/navbar.css">

from 0.28.1 (not working):

    <!-- jQuery -->
    <script src="/js/thirdParty/jquery.min.js"></script>
    <script src="/js/thirdParty/jquery.validate.min.js"></script>
    <script src="/js/thirdParty/jszip.min.js"></script>

    <!-- Bootstrap -->
    <script src="/js/thirdParty/popper.min.js"></script>
    <script src="/js/thirdParty/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="/css/bootstrap-icons.min.css">

    <!-- PDF.js -->
    <script type="module" src="/pdfjs-legacy/pdf.mjs"></script>

    <!-- PDF-Lib -->
    <script src="/js/thirdParty/pdf-lib.min.js"></script>

    <!-- Custom -->
    <link rel="stylesheet" href="/css/general.css">
    <link rel="stylesheet" href="/css/theme/theme.css">
    <link rel="stylesheet" href="/css/theme/componentes.css">
    <link rel="stylesheet" href="/css/theme/theme.light.css" id="light-mode-styles">
    <link rel="stylesheet" href="/css/theme/theme.dark.css" id="dark-mode-styles">
    <link rel="stylesheet" href="/css/rainbow-mode.css" id="rainbow-mode-styles" disabled>
    <link rel="stylesheet" href="/css/tab-container.css">
    <link rel="stylesheet" href="/css/navbar.css">

Browsers Affected

No response

No Duplicate of the Issue

• [X] I have verified that there are no existing issues raised related to my problem.

[Ludy87]

    <!-- Icons -->
    <link rel="apple-touch-icon" sizes="180x180" href="/spdf/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/spdf/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/spdf/favicon-16x16.png">
    <link rel="manifest" href="/spdf/site.webmanifest" crossorigin="use-credentials">
    <link rel="mask-icon" href="/spdf/safari-pinned-tab.svg" color="#ca2b2a">
    <link rel="shortcut icon" href="/spdf/favicon.ico">
    <meta name="apple-mobile-web-app-title" content="Stirling PDF">
    <meta name="application-name" content="Stirling PDF">
    <meta name="msapplication-TileColor" content="#00aba9">
    <meta name="theme-color" content="#ffffff">

    <!-- jQuery -->
    <script src="/spdf/js/thirdParty/jquery.min.js"></script>
    <script src="/spdf/js/thirdParty/jquery.validate.min.js"></script>
    <script src="/spdf/js/thirdParty/jszip.min.js"></script>

    <!-- Bootstrap -->
    <script src="/spdf/js/thirdParty/popper.min.js"></script>
    <script src="/spdf/js/thirdParty/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/spdf/css/bootstrap.min.css">

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="/spdf/css/bootstrap-icons.min.css">

    <!-- PDF.js -->
    <script type="module" src="/spdf/pdfjs-legacy/pdf.mjs"></script>

    <!-- PDF-Lib -->
    <script src="/spdf/js/thirdParty/pdf-lib.min.js"></script>

    <!-- Custom -->
    <link rel="stylesheet" href="/spdf/css/general.css">
    <link rel="stylesheet" href="/spdf/css/theme/theme.css">
    <link rel="stylesheet" href="/spdf/css/theme/componentes.css">
    <link rel="stylesheet" href="/spdf/css/theme/theme.light.css" id="light-mode-styles">
    <link rel="stylesheet" href="/spdf/css/theme/theme.dark.css" id="dark-mode-styles">
    <link rel="stylesheet" href="/spdf/css/rainbow-mode.css" id="rainbow-mode-styles" disabled>
    <link rel="stylesheet" href="/spdf/css/tab-container.css">
    <link rel="stylesheet" href="/spdf/css/navbar.css">
    <link rel="stylesheet" href="/spdf/css/home.css">
    <link rel="stylesheet" href="/spdf/css/fileSelect.css">
    <link rel="stylesheet" href="/spdf/css/footer.css">
    <script src="/spdf/js/thirdParty/fontfaceobserver.standalone.js"></script>

    <!-- Google MD Icons -->
    <link rel="stylesheet" href="/spdf/css/theme/font.css">

    <!-- Help Modal -->
    <link rel="stylesheet" href="/spdf/css/errorBanner.css">

    <script src="/spdf/js/cacheFormInputs.js"></script>
    <script src="/spdf/js/tab-container.js"></script>
    <script src="/spdf/js/darkmode.js"></script>

If I can't reproduce it, can you tell us more about your system

[alturiak]

fwiw, I'm also encountering this issue with 0.28.1 and 0.28.2, 0.26.1 works fine. The html itself (served through apache reverse proxy) loads, but js and css don't as /js and /css don't point to a path relative to stirling-pdf. 0.28.2: <script src="/js/thirdParty/jquery.min.js"></script> 0.26.1: <script src="js/thirdParty/jquery.min.js"></script>

I have not changed any settings of stirling-pdf itself and could not find any setting for custom paths.

Relevant parts of the apache2 config:

<VirtualHost *:443>
        ServerName              omitted
        ProxyPass               /stirling-pdf/ http://172.20.0.5:8080/
        ProxyPassReverse        /stirling-pdf/ http://172.20.0.5:8080/

Please let me know what additional information I can supply to help narrowing down the issue.

[Frooodle]

To confirm for the above issues have you set SYSTEM_ROOTURIPATH in stirling pdf

[alturiak]

To confirm for the above issues have you set SYSTEM_ROOTURIPATH in stirling pdf

Thank you for following up. No, SYSTEM_ROOTURIPATH is currently not set in my environment. Setting it to /stirling-pdf as per my reverse proxy configuration leads to the app 404'ing.

[Frooodle]

So for the path change to work correctly stirling-pdf needs to be informed via SYSTEM_ROOTURIPATH, which will then make stirlingpdf itself be on /stirling-pdf however since you managed to get this working without stirling-pdf knowing it could be your latest settings are conflicting somehow with this, pointing to / and forwarding to /stirling-pdf instead of pointing to /stirling-pdf and forwarding to /stirling-pdf etc

[alturiak]

Thank you. I can confirm that setting SYSTEM_ROOTURIPATH and changing the reverse proxy accordingly works for 0.28.2. Paths to includes are now generated correctly, e.g.: <script src="/stirling-pdf/js/thirdParty/jquery.min.js"></script>.

[mdecker]

Sorry for the late response, I got no notification for some reason.

I'm not sure if I ever tried setting SYSTEM_ROOTURIPATH in the past. Thanks for pointing it out in any case! It works not after also including this path in my reverse proxy configuration.