Setting up redirect on firebase

I recently redid my nuxt personal site (hosted on firebase) and changed some URLs. One of them are links to my blogs. Before, I had my blogs at /blog/my-blog, now it is spelled /blogs/my-blog.

For example, my old redux URL was https://irian.to/blog/redux-101/.

The problem

When I search for my article for "site:irian.to redux 101", google shows the old URL instead of the new one. When user clicks at the link google provides about that redux article (or any blog I made), they will go to incorrect /blog/redux-101 URL.

The Solution

Here are the steps I did to configure redirect on firebase, where I host my site. The solution is very simple and I hope it will help others in the future!

First, per firebase docs, I need to add a redirect attribute in my firebase.json. So here is what I did:

// firebase.json
    ...
    "redirects": [
      {
        "source": "/blog/:slug",
        "destination": "/blogs/:slug",
        "type": 301
      }
    ],

The 301 is for redirect.

Then I deployed it (firebase deploy). The code above takes the old URL (source) and redirect it to correct one (destination). So whenever user goes irian.to/blog/some-blog, he/she will be automatically get redirected to irian.to/blogs/some-blog instead.

That's it!

Whenever I click on google link (the old link with /blog), it now redirects to the new one.

Other firebase redirects

In addition to redirection above, firebase allows several redirect configs. Here are some:

• Basic redirect: whenever user goes to mysite.com/old, they will be redirected to mysite.com/new using:

{
    "source": "/old",
    "destination": "/new",
    "type": 301
}

• Different URL: If you decided to give a URL a new domain, you should use 302 to redirect and inform user that this address is in a new URL.

{
    "source": "/myproject",
    "destination": "https://myawesomeprojectsite.com/",
    "type": 302
} 

• Multiple redirects: If you have multiple URLs, like: mysite.com/menu, mysite.com/menu/sushi, mysite.com/menu/beverage, etc., and want to redirect all of them o mysite.com/foodie. You can do it with ** and {/**}.

{
    "source": "/menu{,/**}"
    "destination": "/foodie"
    "type": 301
},

Thanks for reading. Happy coding! 💻

Source:

• Firebase config

Comments

[PatricNox]

Most people fail to retain links after a domain update, move or framework core version change.

For SEO purposes this is incredibly important, and your solution is explicitly handy for Firebase users.

Great work!

[Igor Irianto]

Thanks Patrick! Hopefully others who are in my shoes won't have to go through the same pain.