Exposing legacy frontend app under /static

[more4less]

I rewrote a frontend project using sveltekit. I also have a link to the old project and I put the old project under static/old. The link is <a rel="external" href="/old">

when I run npm run dev, clicking on the /old link results in empty page (only header & footer) and a server error:

 SvelteKitError: Not found: /old

however when I run npm run build and go to the build dir and run python -m http.server, the link to /old works.

is there any way to get it to work on the npm run dev server as well?

thanks!

[brunnerh]

You can probably set up a proxy in the Vite config. (Your old server still needs to run on some address that can be targeted by the proxy.)

[more4less]

Ah thanks, this will be useful. But my issue is that the old frontend doesn't load at all when on the dev server. Is there a way to "proxy" from the static/old folder?

[brunnerh]

static appears to just serve files without any of the common automatisms (like returning an index.html if only the directory is specified in the path), hence if you need a mechanism like that, you could proxy a file server which does that for this path.

Chances are that there are easier ways of doing this, a simple Vite plugin or handle hook could probably also help.

Edit: A shoddy example of a hook:

Code

// hooks.server.ts
import type { Handle } from '@sveltejs/kit';
import { readFile, stat } from 'node:fs/promises';

export const handle: Handle = async (options) => {
  const { event, resolve } = options;
  // TODO: only do this in dev mode or ensure that the code is actually safe to use!
  if (event.url.pathname.startsWith('/old')) {
    return resolveStaticIndex(options);
  }

  return resolve(event);
};

async function resolveStaticIndex(options: Parameters<Handle>[0])
  : Promise<ReturnType<Handle>> {
  const { event, resolve } = options;

  const localPath = `./static${event.url.pathname}`;
  const stats = await stat(localPath)
    .catch(() => null);

  if (stats != null && stats.isDirectory()) {
    const index = localPath + '/index.html';
    if (await stat(index).catch(() => null) == null)
      return new Response('Not found', { status: 404 });

    const text = await readFile(index, 'utf-8');
    return new Response(text, {
      headers: {
        'Content-Type': 'text/html'
      }
    });
  }

  return resolve(event);
}