After adding Fable.Remoting am I loosing ability to render html

[kunjee17]

Hi, I am using Giraffe with Fable.Remoting. Things are working fine if I am using it with Fable.Elmish single page application.

but what if I wanted to use Giraffe as web server as well to render html pages? Is adding Fable.Remoting will remove that ability or it would be still be possible?

[Zaid-Ajaj]

Hello @kunjee17, yes it is definitely possible. remoting on the server creates a HttpHandler which you can use and combine with other HttpHandlers from giraffe as follows:

let webApi : HttpHandler = 
    Remoting.createApi()
    |> Remoting.withRouteBuilder Route.builder
    |> Remoting.fromValue cheetohApi
    |> Remoting.buildHttpHandler

let webApp = 
  choose [
     GET >=> path "/" >=> renderHtml "index.html"
     GET >=> path "/about" >=> renderHtml "about.html"
     webApi 
  ]

[kunjee17]

@Zaid-Ajaj hey man thanks for reply. it did compiled but was unable to get it work.

Even I tried removing api but url seems to be not working

let webApp : HttpHandler =
    choose [
        GET >=>
            choose [
                    route "/" >=> text "some index"
                    route "/about" >=> text "some about"
                ]
    ]

let configureApp (app : IApplicationBuilder) =
    let serviceProvider = app.ApplicationServices
    let hostingEnv = serviceProvider.GetService<IHostingEnvironment>()
    port <- if hostingEnv.IsProduction() then 80us else 8085us
    app.UseDefaultFiles()
       .UseStaticFiles()
       .UseGiraffe (webApp)

let configureServices (services : IServiceCollection) =
    services.AddGiraffe() |> ignore

WebHost
    .CreateDefaultBuilder()
    // .UseWebRoot(publicPath)
    // .UseContentRoot(publicPath)
    .Configure(Action<IApplicationBuilder> configureApp)
    .ConfigureServices(configureServices)
    .UseUrls("http://0.0.0.0:" + port.ToString() + "/")
    .Build()
    .Run()

Is this code looks legit ?

[Zaid-Ajaj]

The code looks legit if you are using Giraffe alone, if you want to add remoting with it, you need to add the HttpHandler to your webApp, change this:

let webApp : HttpHandler =
    choose [
        GET >=>
            choose [
                    route "/" >=> text "some index"
                    route "/about" >=> text "some about"
                ]
    ]

to

let webApi : HttpHandler = 
    Remoting.createApi()
    |> Remoting.withRouteBuilder Route.builder
    |> Remoting.fromValue cheetohApi
    |> Remoting.buildHttpHandler

let webApp : HttpHandler =
    choose [
        webApi 
        GET >=> choose [
            route "/" >=> text "some index"
            route "/about" >=> text "some about"
        ]
    ]

if this doesn't work, maybe it would be simpler to start from SAFE template with Giraffe and remoting enabled

[kunjee17]

@Zaid-Ajaj you can surely make fun of me when we meet. I was testing 8080 port while server is running on 8085 port. So damn dumb of me. It is very much working. Thanks man. Closing this issue.

[Zaid-Ajaj]

@kunjee17 HAPPENS. ALL. THE. TIME. 😂 no worries!