Subroutes

[sheganinans]

Using the SAFE template, so in Shared.fs I have:

module Route =
    let builder typeName methodName =
        sprintf "/api/%s/%s" typeName methodName

On the Server:

let exampleRouter =
    Remoting.createApi()
    |> Remoting.withRouteBuilder Route.builder
    |> Remoting.fromValue Api.exampleApi
    |> Remoting.buildHttpHandler

let webApp =
    choose [
        exampleRouter
    ]

run <| application {
    url ("http://0.0.0.0:" + port.ToString() + "/")
    use_router webApp
    memory_cache
    use_static publicPath
    use_gzip
}

On the Client:

module Server =

    open Fable.Remoting.Client

    let api : IExampleApi =
      Remoting.createApi()
      |> Remoting.withRouteBuilder Route.builder
      |> Remoting.buildProxy<IExampleApi>

The problem I have is that I would like to put exampleRouter behind a subroute, something like localhost:8080/example/api/.../

I'm doing this so that I can have some otherRouter alongside exampleRouter, such as:

let webApp =
    choose [
        subRoute "/example" exampleRouter
        subRoute "/other" otherRouter
    ]

However everything I've tried so far ends me up with a 404

[0x53A]

I don't know the difference atm, but I think I am using "route" without the "sub" successfully. Can you try that? Otherwise I can look up the exact code I use tomorrow.

[sheganinans]

@0x53A I tried something like that but it didn't work.

Exactly what I want to be able to do is to have the user browse to www.webpage.com/example and have the index page for IexampleApi load and then have them browse to www.webpage.com/other and have the index for IOtherApi load.

[sheganinans]

That would likely require two separate clients talking to the same server. Could be simpler to just have two separate servers..

[sheganinans]

I guess I need to add to the webpack config

[Zaid-Ajaj]

Hello @sheganinans, it should work if you add the subroute prefix in the route builder implementation and not inside Giraffe subsroute like this:

module Route =
    let builder prefix typeName methodName =
        sprintf "/%s/api/%s/%s" prefix typeName methodName

Then when setting up the HttpHandler you can add your prefix:

// Server
let exampleRouter =
    Remoting.createApi()
    |> Remoting.withRouteBuilder (Route.builder "example")
    |> Remoting.fromValue Api.exampleApi
    |> Remoting.buildHttpHandler

let webApp = 
  choose [ exampleRouter ]

// Client
let api : IExampleApi =
Remoting.createApi()
|> Remoting.withRouteBuilder (Route.builder "example")
|> Remoting.buildProxy<IExampleApi>

Can you give it a try?

[sheganinans]

@Zaid-Ajaj Ok, thats seems right. Now the question is, if I wanted to add a second router, with its own index page, that would require quite a bit more work?

[Zaid-Ajaj]

@sheganinans Yes it is a bit more work, follow webpack's config of setting up multiple entry points. I will close this issue since it is not specific to this library