Routing in Azure static web apps

Question

I want to configure the routing for my Angular app on Azure static web app so that the following configuration works as expected

My staticwebapp.config.json

{
    "routes": [
        {
            "route": "/old-route/page/",
            "redirect": "/new-route/page/",
            "statusCode": 301
        },
        {
            "route": "/old-route/page/:filepath",
            "redirect": "/new-route/page/:filepath",
            "statusCode": 301
        },
        {
            "route": "/old-route/page/{id}",
            "redirect": "/new-route/page/{id}",
            "statusCode": 301
        },
        {
            "route": "/old-route/page/:path*.aspx",
            "redirect": "/new-route/page/:path",
            "statusCode": 301
        }
    ],
    "navigationFallback": {
        "rewrite": "/index.html",
        "exclude": [
            "*.{css,scss,png,gif,ico,jpg,svg}"
        ]
    } 
}

The first one works as expected.

The second and third should be redirected to "/new-route/page/:filepath" with the filepath or ID. but nothing of them works as expected. The fourth one should be redirected to "/new-route/page/:path" without extension. but all are not working as expected except the first one.

is my configuration correct and is there any way to overcome this issue?

Answer 1

I agree with MikeOne, Thanks for your Insights

As Per this MSDoc Link, This wildcard is useful when you want to capture a variety of routes under a common pattern

I have tried with my belowstaticwebapp.config.json and deployed

    {
      "trailingSlash": "auto",
      "routes": [
        {
          "route": "/profile*",
          "allowedRoles": ["authenticated"]
        },
        {
          "route": "/images/*",
          "headers": {
          }
        },
        {
          "route": "/customers/contoso*",
          "allowedRoles": ["administrator", "customers_contoso"]
        },
        {
          "route": "/login",
          "rewrite": "/.auth/login/github"
        },
        {
          "route": "/.auth/login/twitter",
          "statusCode": 404
        },
        {
          "route": "/logout",
          "redirect": "/.auth/logout"
        },
        {
          "route": "/calendar*",
          "rewrite": "/calendar.html"
        },
        {
          "route": "/specials",
          "redirect": "/deals",
          "statusCode": 301
        }
      ],
      "navigationFallback": {
        "rewrite": "index.html",
        "exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
      },
      "responseOverrides": {
        "400": {
          "rewrite": "/invalid-invitation-error.html"
        },
        "401": {
          "redirect": "/login",
          "statusCode": 302
        },
        "403": {
          "rewrite": "/custom-forbidden-page.html"
        },
        "404": {
          "rewrite": "/404.html"
        }
      },
      "globalHeaders": {
        "content-security-policy": "default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none'"
      },
      "mimeTypes": {
        ".json": "text/json"
      }
    }

Result:

In the context of a route like "/profile*", the asterisk (*) is a wildcard character that matches zero or more characters. This is often used in route patterns to capture multiple possibilities.

In the example "/profile*", it would match any route that starts with "/profile", followed by zero or more characters. For instance, it would match "/profile", "/profile/settings", "/profile/123", and so on.