How to write redirect rules for Firebase Hosting and Express

Question

I am struggling to understand how firebase.json redirect rules work.

Here I define the hosting to my website, which works perfectly pointing to dist/project-name directory.

"hosting": [
{
  "target": "project-name",
  "public": "dist/project-name",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ],
 ...
 ...

However, things start to get confusing when I try to implement redirect rules. Let's say I want requests to non-existing files and directories be redirected to my hosting public target. I would assume that this is the proper way to define it:

"rewrites": [
    {
      "source": "**",
      "destination": "dist/project-name"
    }
  ]

But making requests to random endpoints like localhost:5000/abcdef, localhost:5000/testing are not being redirected so the request fails. What should the source be then?

Now, let's say that instead of redirecting to my public target directory, I want to redirect to a firebase function with Express.

"rewrites": [
    {
      "source": "**",
      "destination": "app"
    }
  ]

Well, that does not work either in the emulator localhost:5000. Even though I can see functions work (Express app) in the emulator localhost:5001

I am thinking because the /functions directory is not part of the dist folder. But then why redirecting to dist/project-name does not work either? Any ideas? Thank you!

Answer 1

Alright, I had to try a few things and read the documentation to understand what I was doing.

Docs:

1. https://firebase.google.com/docs/hosting/functions#use_a_web_framework
2. https://firebase.google.com/docs/hosting/full-config#rewrites

First, I was thinking that by doing "destination": "dist/project-name" in the rewrites, the url was always going to redirect to the hosting site. So no matter what path I go to (i.e. /abc) it was going to show me the index.html file. Well, that is not the case. The rewrite is not even happening and I could see that in the logs http://localhost:4002/logs. I think that is because of the priority order.

Second, my Express.js app is deployed as a function in firebase. Rewrites to Cloud Functions should be "function": "app" not "destination": "app".

Last but not least, my Cloud Function with Express.js was deployed to us-east1 like this exports.app = functions.region("us-central1").https.onRequest(app);. However, here we can see that Firebase Hosting only accepts us-central1 for Cloud Functions at the moment.