[Feature request] route matching by hostname

[CaarLo1337]

Hello, I wanted to ask if there is a solution approach in which I can change files in the "pwa-kit-react-sdk" on V3?

[kevinxh]

Hi @CaarLo1337 , short answer is No. You can override the template files but not the SDK itself.

Is there a feature that you desire? What would you like to change in the SDK? Feel free to submit a feature request, thank you!

[CaarLo1337]

Hey @kevinxh, This situation is potentially critical for us. We want to implement multilingual routing, which requires a change in the react-rendering.js file.

To briefly explain this with an example: We manage over 20 domains, each representing a different language. Specifically, for the .de domain, we would like to modify the search functionality to work via the "/suche" path, as opposed to the ".com" domain, where it currently operates under "/search".

The approach I envision is as follows: We assign each route an allowed domain and subsequently filter it out when the webpage is accessed.

routes.jsx

{
    path: '/search',
    component: ProductList,
    allowedDomain: 'domain.com'
},
{
    path: '/suche',
    component: ProductList,
    allowedDomain: 'domain.de'
},

and here filter the routes with req.hostname react.-rendering.js

// Step 1 - Find the match.
    let route
    let match

    routes.some((_route) => {
        const _match = matchPath(req.path, _route)
        if (_match) {
            match = _match
            route = _route
        }
        return !!match
    })

That would be an idea, but we are also open to your suggestions. It's important to note that having both "/search" paths active simultaneously, for both the .de and .com domains, is not a viable solution in this case, and we are actively seeking to avoid such a scenario.

[kevinxh]

@CaarLo1337 thanks for sharing the use case. I think I understand the proposal now. The SDK currently only supports path matching (e.g. /search) and it would be nice to support route matching by the entire URL including the hostname like domain.de/search.

Since this is an open source project, would you be interested in open a PR for the change?

[kevinxh]

Is your 20 domains deployed on different environments? If so, you could imagine using an environment variable LOCALE and having logic in your route.jsx to dynamically return different set of routes based on the env var.

(a naive example)

{
    path: process.env.LOCALE === 'de' ? '/suche' : '/search',
    component: ProductList
}

[CaarLo1337]

Hey @kevinxh I appreciate your input. However, making that change could be quite complex as it would involve managing three distinct environments for each domain (Staging, Production, Development).

Returning to my initial question: Is there a potential alternative where we avoid using the override approach and instead modify and utilize the packages in a different way?

[git2gus[bot]]

This issue has been linked to a new work item: W-14508759