admin管理员组

文章数量:1026087

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());
});
  • c#
  • asp-core-8
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

    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());
});
    • c#
    • asp-core-8
    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

      本文标签： cDynamic indexhtml content for single page appStack Overflow

      版权声明：本文标题：c# - Dynamic index.html content for single page app - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745631223a2160175.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。