Redirect to default store if no store-code is in url (application-side)

I was in need of this feature and saw an open issue and PR about this here. But there doesn’t seemed to be any progress or this maybe won’t become a core feature at all – so I searched for a way to do it without changing the core (see my comment) on my own.

I found out that the modules server-hooks are very handy for that usecase – so if you also need this feature, these are the steps you need to do:

  • Be sure you have a valid multi-store configuration running
  • Create a new module folder like src/default-store-redirect
  • Add a file called server.ts inside this folder with the following content:
    import appConfig from 'config'
    import { serverHooks } from '@vue-storefront/core/server/hooks'
    
    if (appConfig.storeViews.multistore) {
      serverHooks.afterApplicationInitialized(({ app }) => {
        const blacklist = ['__webpack_hmr']
        const storeCodes = appConfig.storeViews.mapStoreUrlsFor
    
        const blacklistStr = blacklist.join('|')
        const storeCodesStr = storeCodes.join('|')
        const hasStoreCode = new RegExp(
          `^((?!\\/(${storeCodesStr})(\\/|$))(?!\\/(${blacklistStr})$))\\/?.*((?<=\\.html)|(?<!\\.[a-zA-Z0-9]*))$`
        )
    
        app.get(hasStoreCode, (req, res) => {
          const { path } = req
          const newUrl = '/' + storeCodes[0] + path
    
          let query = ''
          if (Object.values(req.query).length > 0) {
            const params = new URLSearchParams(req.query)
            query += '?' + params.toString()
          }
    
          res.redirect(newUrl + query)
    
          console.log('Redirect to default:', newUrl)
        })
      })
    }
    
  • Rebuild your application and you’re done

So whats happening in the script: I implemented it using a server hook inside a new module (like in robots module with the server.ts ) to add a new ExpressJS route with a regex to check if a store code exists inside the URL (and more magic) and redirect to the first store-code in config.storeViews.mapStoreUrlsFor.

This isn’t tested anywhere else but for my environment – you should check yourself if this catches all your use cases.