Vite sends root index.html content when static html is requested

Question

I'm using the charting library from TradingView, which requires static HTML to be loaded inside an iFrame. I've placed the static html inside the public folder:

/public/charting_library/en-tv-chart.b555c6a4.html

And it is accessed via:

localhost:3000/charting_library/en-tv-chart.b555c6a4.html

However, when requesting the above URL, the contents are that of the root index.html, not that of the static asset.

How can I get Vite to route the HTML asset correctly here?

Answer 1

I solved this by using Vite middleware:

function chartingLibrary(): PluginOption {
  return {
    apply: 'serve',
    configureServer(server: ViteDevServer) {
      return () => {
        server.middlewares.use(async (req, res, next) => {
          if (req.originalUrl?.includes('/charting_library/') && req.originalUrl?.includes('html')) {
            res.setHeader('Content-Type', 'text/html');
            res.writeHead(200);
            res.write(fs.readFileSync(path.join(__dirname, `public/${req.originalUrl}`)));
            res.end();
          }

          next();
        });
      };
    },
    name: 'charting-library',
  };
}

And then in the config:

{
  // ...
  plugins: [
    // ...
    chartingLibrary(),
  ],
}