How to serve html files from multiple folders inside wwwroot in .net

Question

I have multiple folders in wwwroot and each folder has a web package (dist folder contents of VueJs/Angular/React App). As shown in the screenshot, I've created 2 folders and copied dist contents after building Vuejs application.

If I copy dist contents directly to the wwwroot folder for one App and navigate to localhost:5000/ then the app is being loaded properly. But with multiple folders and when I navigate to localhost:5000/page1/index.html then the browser console shows the following error

Failed to load resource: the server responded with a status of 404 (Not Found)

This is because the js and CSS folders are not loaded in the browser.

Below is my code in Startup.cs file.

app.UseStaticFiles();
app.UseFileServer(new FileServerOptions
{
   EnableDirectoryBrowsing = true,
});

Can someone help me solve this?

Answer 1

While you could get 404 responses for each individual image, css, or javascript resource, the html file itself should NOT produce that result. Instead, you should see the page as it would render without those resources, each of which will show it's own 404 in your browser developer tools, but only after successfully loading the html.

There are several ways to fix the additional missing resources. Here are two:

1. Use relative references ( img/SomeImage.png instead of /img/SomeImage.png or the full URL)

2. Use the base tag to reset the root to the current location ( <base href="//localhost:5000/Page1/"> ). This belongs in the head for the html.