Using a Redirect plugin in conjuction with a wildcard route

Question

I have Craft set up to serve a single page Vue App (vue-cli) for all routes it can't match in the sections.

return [
  '<url:(?!api).*>' => ['template' => 'index'],
];

This works perfectly.

However, I was hoping I could also use a Redirect manager plugin like Retour, Redirect Manager or Sprout Redirects.

I tried them all but they only take effect when I disable the routing rule.

How could I have both working together?

Answer 1

The way Retour works, it doesn't do anything until Craft throws a 404 error. Some other plugins do this as well.

Your route is such that anything Craft can't find goes to your SPA; that means Craft never throws a 404, so these tools will not do anything.

What I'd suggest doing is have this redirect happen via your web server.

Answer 2

I ended up making a 404 template (which in atuality is the SPA index file)

This causes the Craft redirects to take effect, and have the SPA as a fallback route.

This means in Production i don't need any such route. For development purposes i do, so i made a conditional route file (to avoid the debug 404 of Craft):

 if(getenv('ENVIRONMENT') === 'dev') {
   return [
     '<url:(?!api).*>' => ['template' => '404']
   ];
 } else {
   return [];
 }