Home
Support Forums

How to get assets in subdirectory to stop 404-ing

I am trying to deploy a simple HTML+JS site on Netlify with Identity. This is the original project structure that worked:

/
├── folder1/
│   ├── index.html
│   ├── css/
│   ├── docs/
│   ├── fonts/
│   ├── images/
├── folder2/
│   ├── index.html
│   ├── css/
│   ├── docs/
│   ├── fonts/
│   ├── images/
├── ...
│   ├── ...

This worked out fine — when I load my-site.com/folder1, assets are loaded correctly, ie. the site pulls from my-site.com/folder1/css/styles.css

However, when I changed the project structure to add an index.html at the root, as well as a _redirects, and after enabling Identity:

/
├── index.html
├── _redirects
├── folder1/
│   ├── index.html
│   ├── css/
│   ├── docs/
│   ├── fonts/
│   ├── images/
├── folder2/
│   ├── index.html
│   ├── css/
│   ├── docs/
│   ├── fonts/
│   ├── images/
├── ...
│   ├── ...

When I visit my-site.com/folder1, the site attempts to load assets from root instead of folder1, ie. my-site.com/css/styles.css instead of my-site.com/folder1/css/styles.css

I’m quite new to routing within Netlify, I’m guessing this has something to do with my _redirects file missing something? Here’s what it looks like:

/folder1/*   200!    Role=folder1
/folder2/*   200!    Role=folder2

(I’m planning on using roles to set which pages each account is allowed to view)

I also have the following deploy settings:

Also kindly note that I am avoiding having to manually change the refs in the index.html files in the subdirectories, as these are programmatically generated and I might end up with over 100 of these subdirectories — but if that is the only way, then oh well.

Can we ask for a website’s URL rather than the placeholder links so that can we investigate this further?

mystifying-goodall-4a368a.netlify.app

Please note folder1 = abc123 and folder2 = xyz987 in my site

I have enabled invite-only Identity and role-based routing, do I need to disable one or both so you’d be able to check?

Thanks!

I tried putting my folder1 and folder2 into a parent folder. What happens is Netlify attempts to load the assets from the parent folder instead of the root — but still 404 since it does not include folder1/folder2 in the path,

eg: “subsubfolder–mystifying-goodall-4a368a.netlify.app/read/css/styles.css” instead of “subsubfolder–mystifying-goodall-4a368a.netlify.app/read/abc123/css/styles.css”

Update: I think I found the culprit — auto-trailing slashes not kicking in.

The refs in the generated index.html files are structured like “css/reflow.css” so it’s a relative path. Going to my-site/abc123 leads to 404-ing assets, but adding a slash (my-site/abc123/) or /index.html then it starts working.

I notice in the working deploy (60e53bdfc1f19f67ac0620d7--mystifying-goodall-4a368a.netlify.app/abc123 for reference) the trailing slash is programmatically added, but in the defective build it is not. I have enabled Pretty URLs in the settings and redeployed with a cleared cache — still the trailing slash is not added.

I have a very hacky solution using snippet injection

See: Bug in non-trailing slash rewrite - Support - Netlify Support Forums

Note this is probably not SEO-friendly at all, but that does not matter in my use case.

To force adding a trailing slash to the end of the path, we can go to Site Settings > Build & Deploy > Snippet injection

Add the following snippet before the </head> tag:

<script>
function addTrailingSlash() {
if(!window.location.pathname.endsWith("/")) {
  window.location = window.location + "/"
}
}
window.onload = addTrailingSlash;
</script>

From the thread I linked above, it seems that doing this client-side is the only way to have a high guarantee that the trailing slash will be added (and thus fix the paths to refs). If there is a better way of doing this in Netlify it would help greatly, especially for those who need a more SEO-friendly solution.