scala.jsplayframework-2.5scalajs-react

Pretty URLs (without '#') on scalajs-react Play app


In the documentation for scalajs-react's router, @japgolly cautions users of the library that starting URLs with '/' slashes requires additional server configuration.

To allow pretty URLs without #, so far I've tried to write a catch-all route in the Play routes file like the following:

# Home page
GET     /          com.xyz.controllers.Application.index(path: String = "")

...
# Catch-all route
GET     /*path     com.xyz.controllers.Application.index(path: String)

with the matching index path in Application.scala

def index(path: String = "") = Action {
  Ok(views.html.index("Title"))
}

and finally the routes declared using RouterConfigDsl in the front-end:

def create = Router(BaseUrl.until_#, RouterConfigDsl[Loc].buildConfig { dsl =>
    import dsl._

    ( emptyRule
    | staticRoute(root, DashboardLoc)                   ~> render(filler("Dashboard"))
    | staticRoute("purchase-orders", PurchaseOrdersLoc) ~> render(filler("Purchase Orders"))
    | staticRoute("dashboard", DashboardLoc)            ~> render(filler("Dashboard"))
    | staticRoute("items", ItemsLoc)                    ~> render(ItemGallery())
    | staticRoute("customers", CustomersLoc)            ~> render(filler("Customers"))
    | staticRoute("sales-orders", SalesOrdersLoc)       ~> render(filler("Sales Orders"))
    | staticRoute("preorders", PreordersLoc)            ~> render(filler("Pre-orders"))
    ).notFound(redirectToPage(DashboardLoc)(Redirect.Replace))
     .setTitle(l => s"XYZ | ${l.name}")
}.renderWith(layout))

Running locally, I have the app auto-redirecting to DashboardLoc at localhost:9000/dashboard and the other static routes work when clicking on them within the web app but fail when reloading.


Solution

  • As it turns out, the problem after all was using BaseUrl.until# instead of BaseUrl.fromWindowOrigin_/. Now all the routes work as expected.