Firebase hosting

Created: 2020-04-11 11:18:13 -0700 Modified: 2020-05-08 21:05:37 -0700

Basics

Quick-start guide
- Be very careful that you don’t stop yourself from receiving emails if you end up pointing a custom domain at Firebase (reference).
- Full configuration documentation
- How to test locally
- How to set up a custom domain
  - I needed to delete my existing A record through DNS
Files are only cached for one hour by default (reference)

Rewrites

Using a custom domain for Cloud Functions

You can use rewrites to point your domain at Cloud Functions (reference), e.g. example.com/yourFn can be used just like projectID.firebaseapp.com/yourFn

Relevant portion from my firebase.json:

{
    "hosting": {
      "rewrites": [
        {
          "source": "/function/twitchRedirect",
          "function": "twitchRedirect"
        },
        {
          "source": "/function/twitchToken",
          "function": "twitchToken"
        }
      ],
    }
}

Then, since I use NextJS, I put those paths into environment variables so that they would only be used in production (e.g. example.com/function/twitchRedirect).

Troubleshooting

Email not being delivered after using hosting

I have another hosting provider besides Firebase, and I was using it to handle my email. My original “A” and MX records all pointed to the hosting provider’s IP address, but when I changed my “A” records to point at Firebase, it meant that my MX record also pointed at Firebase, and Firebase doesn’t handle email. I needed to make a new “A” record called “mx.example.com”, then point my MX record at that (since MX records have to be hostnames, not IP addresses).

Fixing broken anchor links using rewrites

On the hosting that I was using before Firebase, I had FAQ links that looked like this: /faq/#what-is-life. However, when statically hosting on Firebase, it was probably attempting to hit /faq/index.html, so I needed a rewrite like this:

"rewrites": [
    {
        "source": "/faq/",
        "destination": "/faq.html"
    }
]

This works because the fragment of a URL (i.e. the part after ”#”) isn’t even sent to the server.

Originally, I had wanted to capture a segment like /faq/:question* and turn it into /faq:question, but that apparently isn’t possible: https://stackoverflow.com/a/59697280/3595355