.dev.localhost TLD and SSR in vite app

[iturner100]

Is there any guidance on how best to use .dev.localhost TLDs in an app that uses server-side rendering in a javascript frontend (e.g. React Server Components, or SvelteKit) running under vite and proxying api requests through to a dotnet api?

My particular setup is for a SvelteKit application.

In launchSettings.json in the aspire host I have "applicationUrl": "https://app.dev.localhost:17069;http://app.dev.localhost:15069"

In the app host I'm adding an api and ui:

var api = builder.AddProject<Projects.app_api>("api")
    .WithHttpHealthCheck("/health")
    .WithExternalHttpEndpoints();
    
var ui = builder.AddViteApp("ui", "../ui")
	.WithPnpm()
	.WithHttpsEndpoint(env: "PORT")
	.WithHttpsDeveloperCertificate()
	.WithReference(api)
	.WaitFor(api);

Vite is configured with a proxy for the /api route targeting process.env.API_HTTPS. And I request data from the api using relative urls fetch("/api/blah") from the sveltekit app.

Assuming aspire assigns port 56789 on launch, requests that happen under SSR will fail when I'm browsing using https://ui-app.dev.localhost:56789 but will be fine when being executed on the client. If I'm browsing using just https://localhost:56789 then the api requests will work in both SSR and client contexts.

The vite proxy is not being hit when using .dev.localhost TLD under SSR but is being hit when using just localhost under SSR.

For the time-being I'm just proceeding without using the .dev.localhost TLDs.

But would be keen to know if there is something simple I should be doing to get them working under SSR

[catmanjan]

I have the same question, what is the purpose of this feature anyway? Seems like a lot of work for nothing