Firebase Hosting Redirects using Wildcard

Firebase Hosting is a popular choice for hosting Jamstack websites, mostly because it is free but also because it is developer friendly and has almost all features that you might want.

One of the most vital features Firebase Hosting has is the ability to do URL Redirects including 301 redirects.

If you have a firebase project, you can configure Firebase Hosting following these steps.

Then, if you want to redirect a URL www.example.com/articles/my-brilliant-article to www.example.com/post/my-brilliant-post you just need to add a directive in firebase.json file that was created as part of the above configuration

{
  "hosting": {
    "public": "output",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "redirects": [
        {
            "source": "/articles/my-brilliant-article",
            "destination": "/posts/my-brilliant-post",
            "type": 301
        }
    ]
}

It's as simple as that.

But what if you wanted to rename your article category to post, i.e. everything that was www.example.com/article/some-url now has to become www.example.com/post/same-url.

You might be tempted to use regex or *wilcard but it won't work because regex helps in selection of the URLs not naming what it will be in future, essentially what you want to do is capture the some-url in the above example and use it as same-url in the redirect.

Using Variables in Firebase Hosting Redirects

You can define a variable as part of the redirect url by appending it with colon (:), e.g. :path.

So the above example would become,

{
  "hosting": {
    "public": "output",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "redirects": [
        {
            "source": "/articles/:path",
            "destination": "/posts/:path",
            "type": 301
        }
    ]
}

This will redirect all URLs that match the source pattern starting with /articles/ to /posts while keeping the path of the file same.

If you were looking for some other solution, feel free to create a new discussion from the link below.

Need Help? Open a discussion thread on GitHub.

Related Posts