Catch-all fallback route for Vite [[question]]

[jgauna]

Hi Shaunlee, first thanks for this amazing code!

For the web mode you say:

Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!

But I don't fully understand this. I'm using Vite (no-vue, just Alpine) and I don't know how to add a catch-all fallback route.

This is the piece I'm using with no luck. Could you help me with this?

  server: {
    proxy: {
      '/hello/world': {
        target: 'http://localhost:3000/',
        changeOrigin: true,
        secure: false,
        configure: (proxy, _options) => {
          proxy.on('error', (err, _req, _res) => {
            console.log('proxy error', err);
          });
          proxy.on('proxyReq', (proxyReq, req, _res) => {
            console.log('Sending Request to the Target:', req.method, req.url);
          });
          proxy.on('proxyRes', (proxyRes, req, _res) => {
            console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
          });
        }
      }
    }
  }

[shaunlee]

These are two completely different things:

• Vite already supports web mode by default and doesn't need to do anything more.
• server.proxy is the way to integrate with the backend APIs.

catch-all fallback is used to deploy your project on production servers such as nginx,Caddy, Apache, etc.

[jgauna]

Oh, I see. Thanks for the clarification!