Support for serving static files from a specific folder

[fabiospampinato]

Is your feature request related to a problem? Please describe.

My app's structure looks like this:

- app
  - src // Root of the app logic
    - index.tsx  
    - index.html
  - public // Root for the static assets
    - favicon.ico

I can't figure out how to make that work with WMR.

Describe the solution you'd like

I'd like to tell WMR: "try to find a static asset that matches the current query here (/public), otherwise find an entrypoint to serve here (/src)".

Describe alternatives you've considered

Putting a reverse proxy in front of WMR, but having that requirement would be super annoying during development.

Additional context

I'm try to migrate from Next.js, where you can just tell it where to serve static assets from easily.

[developit]

I believe you can do this:

- app
  - src // Root of the app logic
    - index.tsx  
  - public // Root for the static assets
    - index.html
    - favicon.ico

... with index.html referencing the JS+CSS as:

<link rel="stylesheet" href="../src/style.scss">
<script type="module" src="../src/index.tsx"></script>

Basically, if you have a public directory, WMR will serve it as the web root. You can add a src directory, you just have to reference it like you would a path on disk - we don't "layer" the two by default, because there is no technical difference between them.

[fabiospampinato]

Tried it, it kinda works for the assets (there are some issues with that, I'll open a separate issue about that later), but the page doesn't load at all:

It seems that WMR isn't resolving those paths properly perhaps.

[fabiospampinato]

Absolute file:// URLs like the following don't seem to work either, I'm getting a CORS error in the console. I'd expect WMR to pick those up and rewrite them though.

file:///Users/fabio/Desktop/root-wmr/src/index.tsx

[fabiospampinato]

Apparently it doesn't matter how many layers up I try to go with the url, WMR seems to resolve it to the same path:

../../../../../src/index.tsx

404 ./public/src/index.tsx - File not found

[developit]

File URLs aren't supported because they're fundamentally different from paths - that's the reason for the CORS error.

It seems like the default src alias isn't being applied - I'd originally included it in my comment, maybe worth checking if adding it fixes this:

// wmr.config.js
import { defineConfig } from 'wmr';

export default defineConfig({
  alias: {
    'src/*': './src'
  }
});

The reason we don't resolve arbitrary file URLs and paths is because doing so would create a fairly severe security vulnerability (anyone could read the contents of your hard drive over the network).

[fabiospampinato]

It seems like the default src alias isn't being applied - I'd originally included it in my comment, maybe worth checking if adding it fixes this:

Same issue:

404 ./public/src/index.tsx - File not found

The reason we don't resolve arbitrary file URLs and paths is because doing so would create a fairly severe security vulnerability (anyone could read the contents of your hard drive over the network).

Right, makes sense. I forgot that potentially WMR could serve the app for production too, for my use case I'm going to bundle it all up and use a dedicated server for that.

[marvinhagemeister]

The reason we don't resolve arbitrary file URLs and paths is because doing so would create a fairly severe security vulnerability (anyone could read the contents of your hard drive over the network).

Right, makes sense. I forgot that potentially WMR could serve the app for production too, for my use case I'm going to bundle it all up and use a dedicated server for that.

It's not just that but also for development. If the development server is exposed on the network, we don't want other devices to be able to request files they shouldn't be allowed to. Thinking of developers working from coffee shops (maybe not in the pandemic) or other public networks. That's why we set the default host to localhost too, so that only your machine can access it by default.