I have a .NET 8 app with a vue3 frontend. Out of the box it serves index.html from its dev server:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
I would like to intercept this to be able to server side render things like the <title> tag dynamically.
How can I control the returned index.html content, both in development and production build? Either using Microsoft.AspNetCore.SpaServices.Extensions that I use now or the more up to date(?) approach with AspNetCore.SpaProxy.
Should I do a custom app.MapGet("/", () => ... return custom index.html or is there any support for this in the nuget packages?
What I have so far, seems ok at first glance. Not sure if it's robust enough or I missed anything covered by the microsoft extensions:
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "ClientApp/dist"))
});
app.Use(async (context, next) =>
{
if (context.GetEndpoint() != null || Path.HasExtension(context.Request.Path.Value))
{
await next();
return;
}
var htmlGenerator = context.RequestServices.GetRequiredService<IndexFileGenerator>();
context.Response.ContentType = "text/html";
await context.Response.WriteAsync(htmlGenerator.GetHtml());
});
I have a .NET 8 app with a vue3 frontend. Out of the box it serves index.html from its dev server:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
I would like to intercept this to be able to server side render things like the <title> tag dynamically.
How can I control the returned index.html content, both in development and production build? Either using Microsoft.AspNetCore.SpaServices.Extensions that I use now or the more up to date(?) approach with AspNetCore.SpaProxy.
Should I do a custom app.MapGet("/", () => ... return custom index.html or is there any support for this in the nuget packages?
What I have so far, seems ok at first glance. Not sure if it's robust enough or I missed anything covered by the microsoft extensions:
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "ClientApp/dist"))
});
app.Use(async (context, next) =>
{
if (context.GetEndpoint() != null || Path.HasExtension(context.Request.Path.Value))
{
await next();
return;
}
var htmlGenerator = context.RequestServices.GetRequiredService<IndexFileGenerator>();
context.Response.ContentType = "text/html";
await context.Response.WriteAsync(htmlGenerator.GetHtml());
});
- It seems your approach for intercepting requests and dynamically generating the index.html file is on the right track. – Rena Commented Nov 18, 2024 at 8:10
- @Rena