c# - Dynamic index.html content for single page app - Stack Overflow

I have a .NET 8 app with a vue3 frontend. Out of the box it serves index.html from its dev server:<

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());
});
Share Improve this question edited Nov 17, 2024 at 19:56 Johan asked Nov 17, 2024 at 16:48 JohanJohan 35.3k62 gold badges189 silver badges306 bronze badges 8
  • 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

    发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745631224a4637120.html

相关推荐

  • c# - Dynamic index.html content for single page app - Stack Overflow

    I have a .NET 8 app with a vue3 frontend. Out of the box it serves index.html from its dev server:<

    4小时前
    10

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信