DEV Community

Igor Irianto
Igor Irianto

Posted on • Updated on • Originally published at

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

The problem

When I search for my article for " 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.

Old Google Result

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
Enter fullscreen mode Exit fullscreen mode

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, he/she will be automatically get redirected to instead.

That's it!

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

URL redirects 301

Other firebase redirects

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

  • Basic redirect: whenever user goes to, they will be redirected to using:
    "source": "/old",
    "destination": "/new",
    "type": 301
Enter fullscreen mode Exit fullscreen mode
  • 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": "",
    "type": 302
Enter fullscreen mode Exit fullscreen mode
  • Multiple redirects: If you have multiple URLs, like:,,, etc., and want to redirect all of them o You can do it with ** and {/**}.
    "source": "/menu{,/**}"
    "destination": "/foodie"
    "type": 301
Enter fullscreen mode Exit fullscreen mode

Thanks for reading. Happy coding! 💻


Top comments (2)

patricnox profile image

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!

iggredible profile image
Igor Irianto

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