Goal:
I am testing Netlify rewrite rules which would facilitate handoffs/linking from the blog microsite to the main website, both of which are hosted on Netlify.
Issue:
I have created a test page (https://gallant-lumiere-3bf91e.netlify.app/blog/search) with 2 hyperlinks next to the search box, the second hyperlink (which is the issue here) goes to the home page (www.guidedogs.org.uk) which is also hosted on Netlify. It does rewrite but the rendered page has no CSS applied. I would expect the page to be rendered as if I was visiting the URL directly.
Is there any configuration/setup I can do to make this work as expected?
I see you also posted in a Help Desk ticket, so I’ll post both there and here in case anyone else has a similar issue.
A limitation of rewrites and proxies is that rewrites can cause pages that use assets specified through relative paths to load incorrectly. The solution is to use either absolute paths or a < base > tag.
Another solution, and possibly the easiest, would be to enable asset optimization (bundled CSS and bundle JS) within your Site’s Settings > Asset optimization.
Let us know if you have any further questions and we’ll be happy to assist. Thanks!
Yes, all of those settings would apply to destination URL.
I’d like to add a note that even though it’s listed in docs as limitation of proxy, it’s not really a limitation of Netlify. It’s how browsers resolve relative URLs - they check for address in the address bar (or the base tag) and resolve the relative paths to that address.
A limitation of asset optimization however is that, it will not optimise all CSS/JS assets in your deploy - it will just optimise all CSS/JS assets that are referenced in your HTML files at deploy time. If your SSG adds scripts and assets after the page loads, they won’t be processed by asset optimization.