Hi, I've got another Navigo question. When I click...

# kvision

[Adam S]

Hi, I've got another Navigo question. When I click on a link servers/id123 it takes me to localhost:3000/servers/id123 as expected. When I hit the refresh button, it 404's.

What can I do to make refreshing work?

[Robert Jaros]

Add config.devServer.historyApiFallback = true to webpack.config.d/webpack.js

[Robert Jaros]

It will make webpack dev server redirect 404 to your index.html

[Robert Jaros]

You need to make sure your main.bundle.js is included correctly (relative link will not work because there is no /servers/main.bundle.js)

[Adam S]

can I make http://localhost:3000/servers/test-server navigate to the correct page? I don't want to go to the index

[Adam S]

because it's not a 404, the page exists, but only when I click on the link from the homepage. If I refresh it should take me to the same page

[Adam S]

What does a correctly included main.bundle.js look like? At the moment it's

<script type="text/javascript" src="main.bundle.js"></script>

which matches the KVision example https://github.com/rjaros/kvision-examples/blob/cae2b0c29d8db69747667fae33b3293a2f9bd490/showcase/src/main/web/index.html#L8

[Robert Jaros]

src="/main.bundle.js" should work fine in most cases

[Adam S]

thanks that works

[Robert Jaros]

Typically there is only one HTML file in your app - index.html. It's loaded when your app is first opened. When using history api routing the URL in your browser will change but the loaded file will not change. But when you hit "reload" button the browser will ask the server to get e.g. /servers/test-server. There is no such page and the server needs to know what to do - it must return the same index.html. That's what historyApiFallback option do for webpack server. You will also need to configure your production web server for this.

[Adam S]

I get a weird issue though where if I click on the server link and the browser navigates to /servers/test-server, then I refresh, the URL stays as localhost:3000/servers/test-server. And then if I click the link again it navigates to localhost:3000/servers/test-server/servers/test-server

[Robert Jaros]

That probably means your link is not handled by navigo.

[Robert Jaros]

You should make sure the routing.updatePageLinks() is called after the link is rendered on the page.

[Robert Jaros]

I definitely should create an example app with history api routing 😉

[Adam S]

a full example would help :)

[Adam S]

it doesn't help that I'm trying to use KVision to skip learning all these JS libraries

[Adam S]

a Kotlin DSL wrapper around Navigo would help as well, rather than directly using the externals

[Robert Jaros]

I've created only one such application myself, unfortunately it's not open source.

[Robert Jaros]

Unfortunately even publishing such app with github pages is also a pain ...

[Robert Jaros]

It looks ok

[Robert Jaros]

Do you create a Routing instance in your app?

[Robert Jaros]

There is io.kvision.routing.routing instance variable initialized by KVision itself, but I prefer to use my own instance for better initialization control.

[Robert Jaros]

I'm using similar code:

object Manager {
    lateinit var routing: Routing

    fun init() { // called from start() function
        routing = Routing("/", useHash = false)
        routing.routing() // extension function to define routings
        routing.resolve()
    }

    fun updatePageLinks() { // called after state change
        if (::routing.isInitialized) {
            window.setTimeout({
                routing.updatePageLinks()
            }, 0)
        }
    }
}

[Robert Jaros]

Going to bed - if you have more problems I'll try to help tomorrow.