You’ll want to deploy the blog as a subdirectory of the published site (that is: not in the root directory).
This part was confusing. How do I deploy my “blog” (i.e. versioned site) as a subdirectory of the “published site” (i.e. the main site) if they’re two different sites?
P.S. I’m currently deploying four sites by targeting individual branches – is there a better way to achieve the above task? (Different versions of the app in one app, branched w/ subdirectory)
Without the URL changing, while the HTML content has been served from amseeyou-v2.netlify.app the browser is trying to load the assets from amseeyou.netlify.app and they quite simply do not exist there.
Aha! Thanks. Glad to know a few of the 9 permutations I tried were working as intended. Thanks for your time in answering!
I’ve marked the above post as the solution as it directly answered the question, however I’m a bit stumped on the implementation of the solutions.
Changing the asset references on the sub-sites to be absolute URL’s.
I attempted this solution – I changed the base path for https://amseeyou-v3.netlify.app to https://amseeyou-v3.netlify.app. And… it partially worked. The JS seems to be blocked by CORS. Would you happen to have a tip on how I should continue here? The hosted site (i.e. https://amseeyou-v3.netlify.app) isn’t a server, so I’m not sure where I would set it to allow cross origin…
Adding additional rewrites so the assets requested on amseeyou.netlify.app resolve to the correct location.
This seems more straightforward in some respect, however, I’m not sure where to start. Additionally, my intuition tells me that I’m bound to run into CORS here as well.
But they currently aren’t, they’re more generic (/assets/, /static/assets/ etc) so they can’t be blanket rewritten with a wildcard, and they also consist of generative sha’s so manually specifying each individual asset would break when your code changes.
Sweet! I got it to work! For my future self and for others who are in a similar boat, here’s what I ended up doing:
For context, this situation was slightly complicated due to two different bundlers/compilers (webpack from CRA, and esbuild from Vite). I didn’t want to bother updating webpack, and wanted the path of least resistance as this feature is simply for archiving purposes. So, my solution here is a mix of both of the items detailed above:
For amseeyou-v1 and amseeyou-v2, which are CRA apps, I ejected the bootstrapped react-scripts, and renamed /static to /static-v<num>. I couldn’t figure out how to set absolute pathing and quite frankly, the ejected config was complicated enough, I didn’t want to bother.
For amseeyou-v3, which is built using Vite, I added base: 'https://amseeyou-v3.netlify.app' in vite.config.ts in defineConfig(). Ironically, I couldn’t figure out how to set relative pathing here. Setting the base as /assets-v3 didn’t work as the value just simply got prepended, which was not helpful.
In all of three repos, a netlify.toml was added in the root w/ the same info:
[[headers]]
for = "/*"
[headers.values]
access-control-allow-origin = "https://amseeyou.netlify.app"
So, w/ the mixed solution, the _redirects in the main repo had to follow the mixed approach (notice that the v3 didn’t need to redirect the static files):
Again for anyone else encountering this, if you have very few assets that won’t change filename (don’t contain SHA’s etc), it’d be perfectly valid to just do a rewrite per asset.
In which case you usually wouldn’t require any changes to your site config/code.
