Context: Bootstrapping an F# app that uses server sider blazor/ razor components BUT does not use razor to define components. Instead I use FsBoleros DSL.
Everything works as expected but there is still on .cshtml file (_Host.cshtml) that I'd like to replace with just (F#) code for a few reasons:
All my code will be written in F# - but if I need to change things/ add code to the host razor file I need to mix in C#. While this works it's not optimal and I'd rather just have F# code and no special razor file.
F# Projects depend on file ordering. The razor file behaves a bit strange in that regard (I cant just reorder it like other files in my project using IDE tooling).
So the goal is to get rid of the _Host.cshtml file and replace it with just code.
I've already invested 2 days in trying to do this. There seems to be little to no content on how to replace a razor page with just code or how to call a tag helper from non razor code. A little guidance on how to approach this would be highly appreciated, otherwise I'll burn more time on this.
My current understanding of what I have to do is:
Render a html response that includes
- the server side blazor framework
- the prerendered root component annotated with a special comment
Is this correct ?
If so:
Generating the needed html page is trivial except for the prerendered annotated component. Is calling a tag helper the right approach to achieving that (as I'm having some issues with that) ?
Other Component rendering classes (and interfaces) are internal so I suspect that I should not use them. I also assume that I have to use the tag helper in order to get the html correctly annotated.
note: It's not required to actually replace it with code that does exactly the same (eg. is a razor page) but rather does what is required to bootstrap blazor in a maintainable fashion (so no magic string plumbing).
(This is the _Host.cshtml file to replace)
@page "/"
@namespace X.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Bolero Application</title>
<base href="~/">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<h1>Blazor Host</h1>
<component type="typeof(App)" render-mode="ServerPrerendered"/>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
