Firebase Logo (from Google)

Today, I was playing around with Firebase hosting configurations and was trying to do something a simple web server could do:

I wanted to redirect a subdomain to the main domain with a trailing path, including the remainder of the path and query parameters. In other words, I wanted to redirect blog.nibiru.fi/foo?bar to nibiru.fi/blog/foo?bar.

(For context, I’m one of the lead developers at Nibiru: https://nibiru.fi)

After half a day of Googling and reading through StackOverflow questions, I realized I needed to figure this out myself. So I spent another couple of hours hacking around Firebase and devised a solution using multisites and redirects.

In my example, I’m going to set up a website that’s accessible with three domains: nibiru.fi for the main page, blog.nibiru.fi for the blog site, and docs.nibiru.fi for the docs website.

Prerequisites

  • the latest Firebase CLI (I’m using v11.22.0 as of the time of writing)
  • created a Firebase project and have a local directory for your project
  • a domain name with the ability to update the DNS A records

Step 1: Set up a site for each subdomain

Go to your Firebase console and add three sites (or as many as you’d like):

  • the main page nibiru-chain.web.app
  • the blog site nibiru-blog.web.app
  • the docs site nibiru-docs.web.app

Firebase Console

Step 2: add custom subdomains to your sites

Follow the steps here to add a subdomain to each of your sites. In this example, I’m going to use nibiru.fi for nibiru-chain.web.app, blog.nibiru.fi for nibiru-blog.web.app, and docs.nibiru.fi for nibiru-docs.web.app.

It should take a few minutes for Firebase to verify and connect the subdomains.

Firebase Custom Domains

Step 3: Configure your project’s local .firebaserc

# in your project directory, run the following commands
$ firebase target:apply hosting main nibiru-chain
$ firebase target:apply hosting blog nibiru-blog
$ firebase target:apply hosting docs nibiru-docs

Your .firebaserc should look something like this:

{
  "projects": {
    "default": "<firebase-project>"
  },
  "targets": {
    "<firebase-project>": {
      "hosting": {
        "main": [
          "nibiru-chain"
        ],
        "blog": [
          "nibiru-blog"
        ],
        "docs": [
          "nibiru-docs"
        ]
      }
    }
  },
  "etags": {}
}

Step 4: Set up redirects in your firebase.json

The magic here is to have each of the subdomain sites blog and docs redirect to the main domain with a path prefix of /blog or /docs. We can accomplish this with the following firebase.json:

{
  "hosting": [
    {
      "target": "main",
      "public": "public",
    },
    {
      "target": "blog",
      "redirects": [
        {
          "source": "/:path*",
          "destination": "https://nibiru.fi/blog/:path",
          "type": 301
        },
        {
          "source": "**",
          "destination": "https://nibiru.fi/blog",
          "type": 301
        }
      ]
    },
    {
      "target": "docs",
      "redirects": [
        {
          "source": "/:path*",
          "destination": "https://nibiru.fi/docs/:path",
          "type": 301
        },
        {
          "source": "**",
          "destination": "https://nibiru.fi/docs",
          "type": 301
        }
      ]
    }
  ]
}

The config takes advantage of Firebase’s redirects with URL segments to preserve the relative path of the blog post or docs page the user is trying to access but redirects the user to the main domain with a prefixed /blog or /docs path. The :path* glob captures everything, including query parameters and hashes.

Conclusion

Now when you access blog.nibiru.fi/foo?bar#baz, it will redirect you to nibiru.fi/blog/foo?bar#baz, and likewise with the docs site.

If you liked this tutorial or found it helpful, please follow me on Medium and Nibiru on Twitter!