[Proposal] Infer vite's dev-server port on SSR to leverage [ngSrc]'s full path automatically

[renatoaraujoc]

Which scope/s are relevant/related to the feature request?

platform

Information

Hello,

Currently, when working with SSR locally on Vite DevServer, there's no way to infer the baseURL to prepend requests for the assets given that Domino can't figure out what's going on.

When debugging Angular's source code, window.location.href is resolved to / which is used to construct the asset url like new URL(assetPath, window.location.href). Right now, if you just throw a relative path like /assets/image.png the server will throw an exception and that's it.

In production things are easier because we can provide the imageLoader, no big deal.

Right now, if you dont supply a full path like http://localhost:{PORT}/assets/image.png, SSR will throw an error when using img[ngSrc].

Describe any alternatives/workarounds you're currently using

What I do today for development purposes

1. Tell Vite's server that we want to work with specific port and it should be strict.
2. If we're in development, provide an environment variable like DEV_PORT.

file: vite.config.ts

// ...redacted
server: {
    port: 4202,
    strictPort: true
},
define: {
    ...(mode === 'development'
        ? {
              'import.meta.env.DEV_PORT': '4202'
          }
        : {}),
    'import.meta.vitest': mode !== 'production'
}
// ...redacted

3. In my assetPath function, test if we're running in SSR and if there's a DEV_PORT defined and if so, return the full local url so SSR can successfully fetch the image.

file: assets-path.ts

export const assetPath = (file: string) => {
    if (import.meta.env.SSR && !!import.meta.env?.['DEV_PORT']) {
        return `http://localhost:${import.meta.env.DEV_PORT}/assets/${file}`;
    }

    return `/assets/${file}`;
};

This works but it's hackish (at least for me).

Proposal

Some ideas came to mind:

1. Vite's analog-plugin could leverage some of this and provide the DEV_PORT automatically like I'm doing, ports can be randomly assigned, so this would make things less hardcoded.

2. Or analog-plugin could receive a new property like: { ssrBaseUrl: 'INFER' | (string & {}) }.
   2.1 if a string is passed, its supposed to be a full base url like: 'http://localhost:4200' or;
   2.2 if 'INFER' is passed, analog plugin could somehow infer internally the dev-server port and somehow inject the value http://localhost:{VITE_DEV_PORT} into window.location.href in Domino (or some other magic) so everything would work out of the box.

These are my main ideas, I'm happy to hear about you guys :)

PS: I can't provide any PR for this today because I have 29 days to finish a gigant project, but I felt it was worth it to bring this discussion here.

Renato

I would be willing to submit a PR to fix this issue

• Yes
• No