7

GitHub - slaveOftime/Fun.Blazor: Powered by bolero and blazor!!! ❤ F#

 3 years ago
source link: https://github.com/slaveOftime/Fun.Blazor
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Fun.Blazor

This is a project to make F# developer to write blazor easier.

It is based on bolero and Feliz.Engine

WASM side docs

Server side docs

Fun.Blazor

Create a WASM app

* Other resources like index.html should be put under wwwroot. You can check Fun.Blazor.Docs.Wasm project for detail
dotnet add package Fun.Blazor
open System
open Microsoft.Extensions.DependencyInjection
open Microsoft.AspNetCore.Components.WebAssembly.Hosting
open MudBlazor.Services
open Fun.Blazor

let app = html.text "hello world"

let builder = WebAssemblyHostBuilder.CreateDefault(Environment.GetCommandLineArgs())
        
builder
    .AddFunBlazorNode("#app", app)
    .Services
        .AddFunBlazor()
    |> ignore
        
builder.Build().RunAsync() |> ignore

Create a blazor server app

dotnet add package Fun.Blazor
dotnet add package Bolero.Server
open System
open Microsoft.AspNetCore.Builder
open Microsoft.AspNetCore.Hosting
open Microsoft.Extensions.Hosting
open Microsoft.Extensions.DependencyInjection
open MudBlazor.Services
open Bolero.Server.Html
open Fun.Blazor.Docs.Server
open Fun.Blazor
open Fun.Blazor

// Currently the we need to define a class to render for server side blazor. In the future if I found some workaround this could be simpler
type Index () =
    inherit Bolero.Component()

    override this.Render() = html.text "hello world" |> html.toBolero

    static member page =
        doctypeHtml [] [
            html.html ("en", [
                html.head [
                    html.title "Fun Blazor"
                    html.baseUrl "/"
                    html.meta [ attr.charsetUtf8 ]
                    html.meta [ attr.name "viewport"; attr.content "width=device-width, initial-scale=1.0" ]
                ]
                html.body [
                    attr.styles [ style.margin 0 ]
                    attr.childContent [
                        html.bolero rootComp<Index>
                        html.bolero Bolero.Server.Html.boleroScript
                    ]
                ]
            ])
            |> html.toBolero
        ]

Host.CreateDefaultBuilder(Environment.GetCommandLineArgs())
    .ConfigureWebHostDefaults(fun builder ->
        builder
            .ConfigureServices(fun (services: IServiceCollection) ->
                services.AddControllersWithViews() |> ignore
                services
                    .AddServerSideBlazor().Services
                    .AddBoleroHost(true, true)
                    .AddFunBlazor() |> ignore)
            .Configure(fun (application: IApplicationBuilder) ->
                application
                    .UseStaticFiles()
                    .UseRouting()
                    .UseEndpoints(fun endpoints ->
                        endpoints.MapBlazorHub() |> ignore
                        endpoints.MapFallbackToBolero(Index.page) |> ignore) |> ignore) |> ignore)
    .Build()
    .Run()

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK