Server configuration for pushstate

Kirby 3 Solved ✅
1

Hi everybody,

I’m currently creating a single page app in a subfolder of my site. It contains a couple of accordion panels which, when toggled, change the url from i.e website.test/spa to website.test/spa/entry-one, using javascript’s history API.

Now, obviously, when the user refreshes the page, website.test/spa/entry-one is not found on the server, so I want to redirect to website.test/spa, while keeping the url intact so I can retrieve & use the uid in a function to toggle the corresponding panel.

I’ve found some semi helpful stuff online, but nevertheless wanted to ask if there might be a Kirby-specific solution for this. Should I try and redirect using htaccess (which I am utterly illiterate in), or write a php function on page load? And what would that look like?

Any hints greatly appreciated!

2

I think there are two ways: you can either set up a general redirect in your .htaccess (search for mod_rewrite) or you can create a catch all route in the Kirby configuration. Personally, I’d use the first option but using a route might be easier when you are familiar with Kirby but not with writing htaccess rules.

1 Like
3

Thank you for the reply! I ended up using the router:

/config/config.php

return [
    'routes' => [
        [
            'pattern' => '/spa/(:all)',
            'action'  => function (string $path) {
                return page('spa');
            }
        ]
    ]
];

and getting the url on page load, then executing the needed scripts if locationUid is anything else than the root folder:

let locationUid = window.location.pathname.split("/").pop();
if (locationUid != 'spa') { 
    //myfunction
}

working perfectly! Thanks again for your help!

4

…oh, could you maybe elaborate why using .htaccess would be your preferred method rather than using Kirby routes?

5

Because it is executed before PHP is started. In fact, the first option would be the server config file, second .htaccess, last a route. But server config file is only an option for your own server/VPS.

2 Likes
6

I see! For now the route is working fine, but I’ll have a look into the proper .htaccess way. Unfortunately, I’m not hosting on my own server. Thanks!