Build Static Report - Relative Pathing

[ErikCarlson-RGA]

Clear and concise description of the problem

When you do a --build-static, the pathing for the folders and files are mostly absolute referenced. In the root index.html that gets generated:

<script type="module" crossorigin src="/assets/index.12341234.js"></script>.

This becomes a problem if you want to create a central repository of multiple site scans in a singular hosted environment, S3 Website or even CloudFront -> S3 Bucket for example. The use case is we want to host a site where a CI can just s3 sync the scans to specific S3 folders and then we can browse accordingly. The site would have the following paths:

domain.com/site1-scan1
domain.com/site2-scan1
domain.com/site2-scan2

Expanding the bucket structure of domain.com/site1-scan1

s3://bucket/site1-scan1/assets/
s3://bucket/site1-scan1/index.html
s3://bucket/site1-scan1/ci-result.json
s3://bucket/site1-scan1/reports/

Because of the absolute references, the browser will always be requesting domain.com/assets/index.12341234.js when you go to domain.com/site1-scan1, which breaks because the assets folder doesn't exist at root.

Is it possible to have the paths generated relatively?

Suggested solution

Generate the paths of static builds as relative instead of absolute.

Alternative

No response

Additional context

No response

[surgiie]

I had a similar use case and would be interested in this. For now Im working around this by manually replacing instances of "/assets" with the proper url prefixes for pointing at different folders on s3/cloudfront.

find .unlighthouse -type f | while read file; do
    sed -i 's|/assets|/<url-prefix-s3-folder>/assets|g' $file
done

[ErikCarlson-RGA]

I tested something similar and discovered it solves the issue, but also creates potential headaches. The fix replaces pathing on content of captured html if it posses /assets or /reports anywhere.

For example, our source domain might have origin.com/assets/vidoes/movie1.mp4. The reports that get generated, capture the html of the page. These are found in /reports/page-path/lighthouse.html. This lighthouse result page, now has the original captured html modified with the s3-folder unintentionally. Same if we have a news site or something origin.com/reports/all-the-base-belongs-to-us.

I can see a producer or product manager scanning the results and noticing the captured page has wrong pathing or text in the reports pages and start raising issues. Yes, I can modify the script to exclude certain files, but it just creates more debt to deal with later. Simplicity is favored.

[harlan-zw]

Hey, I think you might want the routerPrefix option.

[ErikCarlson-RGA]

Well golly gee. I honestly didn't look too hard at the options file, since I was trying to make something templateable with as little custom files between CI's as possible.

I didn't see --router-prefix listed under the cli flag options page, but I tested just now to see if I could call it, and that worked. I also tested using the options file, which obviously worked as well.

Thank you for your response. My specific use case is fixed by this flag. Closing.

[harlan-zw]

Great to hear, I'll try and make this easier to find in the documentation.