resource route priority with existing files in public folder

[last pasture]

Hi All 👋

Is it possible to create a resource route which takes priority over existing files in the public folder?

The usecase I have is for an image proxy which allows resizing of images, so for example if I have an existing file /public/images/my-image.jpg and I have a resource route at routes/images.$.ts

In that loader I do my logic which reads the image as a buffer using fs from the splat path and then applies sharp transformations and caches the transformed image, so for example:

const loader = ({params, request}) => {
  const imagePath = params["*"]

  const readFile = async () => {
    try {
      const relativePath = path.resolve(
        process.cwd(),
        `public/images/${imagePath}`
      );

      debug("Trying to read image at", relativePath);
      return await fs.readFileSync(relativePath);
    } catch (error) {
      console.error(error);
      throw new Response("Image not found", { status: 404 });
    }
  };

  return myMediaProxy(request, readFile) // applies `sharp` transformation logic and caching on the file returned from `readFile`
}

When I visit the route /public/images/my-image.jpg?width=10&height=10 it is not triggering my loader as it is using the static resource as priority.

❓ Is it possible to tell remix that the loader should take priority over the existing resource?

[echo hare]

the only way to reach your resize logic is to visit /images/imageName, whereas you're pointing things at /public/images/imageName.jpg

You can very easily just point everything at /images/imageName and then you can handle always reading out the images from that route. You're almost there, your naming is just slightly off

You probably just want to check query params if they exist apply filters, if they don't just serve the normal image

[last pasture]

I'm not sure I understand what you mean @echo hare , /public/images/imageName.jpg is the location of the static assets imageName.jpg on my filesystem, docs: https://remix.run/docs/en/1.19.3/tutorials/jokes#explore-the-project-structure:~:text=public/ - This is where your static assets go (images/fonts/etc)

My question is around having a splat resource path at the same location as an existing static asset, so for example: /app/routes/images.$.tsx

Inside the loader I handle the imagePath , so const imagePath = params["*"] will result in imageName.jpg

But my issue is that the static asset takes priotity over the defined route in my routes folder, and I was wondering if there is a way around it.

[echo hare]

What im saying is you read the public/images folder always with fs, and if you have query parameters then you make the change to your image, if you don't then you just return the image

remix right now is basically using fs to read your public folder

so you can do that instead in the route you made

so you take over the handling of static assets is what im trying to get at