Exporting a page with path param as a dynamic route

[NikSatyr]

Hey there, I'm building a website with a blog functionality. I want the user to be able to access the paths like site.com/blog/how-to, site.com/blog/kobweb etc.

My kobweb page setup looks like this:

@Page("blog/{slug}")
@Composable
fun ArticlePage() {
    val ctx = rememberPageContext()
    SpanText("You are reading ${ctx.route.slug}")

When exporting the website with kobweb export --layout static, only blog.html is generated (which is obvious since we cannot know all the routes in advance).

So, this leads to a situation where these path params work perfectly when simply running kobweb run, but running an exported version results in a 404.

My initial thought is to handle this via redirects to query params like site.com/blog/how-to > site.com/blog?article=how-to, but this seems to be a workaround rather than a solution.

Is there a way to make these paths work in the exported version?

[bitspittle]

Dynamic routes can only work with static hosts that support rewrites. For example, if you're using firebase, you can add the following rewrite:

"hosting": {
  // Serves index.html for requests to files or directories that do not exist
  "rewrites": [ {
    "source": "**",
    "destination": "/index.html"
  } ]
}

If this isn't available to you, another option is to manually generate pages for certain routes in your build script:

kobweb {
  app {
    export {
      addExtraRoute("/blog/how-to")
      addExtraRoute("/blog/kobweb")
    }
  }
}

Of course, you can always manually just create placeholder pages which delegate to some common composable, as well:

// components/sections/BlogPage.kt

internal fun BlogPage() {
   val ctx = rememberPageContext()
   val slug = remember(ctx.route) { ctx.route.substringAfter("/") }
   // do something with slug
}

// pages/blog/HowTo.kt

import components.sections.BlogPage

@Page
@Composable
fun HowToPage() {
   BlogPage()
}

// pages/blog/Kobweb.kt

import components.sections.BlogPage

@Page
@Composable
fun KobwebPage() {
   BlogPage()
}

Ideally though you can just use a rewrite solution.

[NikSatyr]

yeah, the static site rewrites seem to be the right track for me. thanks for the help and an amazing framework!

[bitspittle]

Awesome, I'm glad that option was available to you. And you've very welcome. Good luck with your project!