Vite serving shader file with wrong (none) MIME type

Question

I'm developing a BabylonJS application. BabylonJS PostProcess class appends .fragment.fx to a given file name and requests that from the server. When my local Vite (version 4.0.4) dev server serves this file the content-type header is empty. This causes Firefox to intepret it as type xml and fail. Chrome fails through a different, but I think related, mechanism.

How do you configure Vite to serve the *.fragment.fx static files as text/plain ? I assume I need to disable the default middleware and write some custom code instead, like this: https://vitejs.dev/config/server-options.html#server-middlewaremode but I wanted to first check there wasn't something else going on / a simpler way to configure / fix this.

The vite dev server is started using vite --host --port 3000 --force and the config in vite.config.js is:

import { defineConfig } from 'vite';

export default defineConfig(({ command, mode }) => {
    // if (command === 'serve') {
    //     return {
    //       // dev specific config
    //     }
    // } else {
    //     // command === 'build'
    //     return {
    //         // build specific config
    //     }
    // }


    return {
        resolve: {
            alias: {
                "babylonjs": mode === "development" ? "babylonjs/babylon.max" : "babylonjs",
            }
        },
        base: "",
        // assetsInclude: ['**/*.fx'],
    };
});

* edit 1 *

I have seen there's a parameter ?raw that can be added to the URL however I don't control how BabylonJS forms the URL so I can't see how to make this work in this situation.

Answer 1

I followed these instructions and set up a dev server using express. I added this block of code above the call to app.use(vite.middlewares) :

  app.use("**/*.*.fx", async (req, res, next) => {
    const url = req.originalUrl

    const file_path = path.resolve(__dirname, "." + url)

    const file = fs.readFileSync(file_path, "utf-8")

    res.status(200).set({ "Content-Type": "text/plain" }).end(file)
  })

I now start the dev server using the following script line in the package.json of "dev": "node server",

I could not find a way to solve this by configuring the default vite dev server.