Firebase hosting rewrites for Cloud Functions firebase.json not working with multiple environments

Question

I have a project with multiple firebase hosting projects set up (for staging and production), and when I add rewrites per the Firebase docs here the rewrite for function /bigben does not work at https://customdomain.com/bigben (both deployed to production and in the emulators)

firebase.json

{
  "hosting": [
    {
      "target": "production",
      "public": "build",
      "rewrites": [
        {
          "source": "/bigben",
          "function": "bigben"
        },
        {
          "source": "**",
          "destination": "/index.html"
        },
        {
          "source": "!/@(js|css|svg|jpg|png|gif|ico|json|html)/**",
          "destination": "/index.html"
        }
      ]
      // ...
    },
    {
      "target": "staging",
      "public": "build",
      "rewrites": [
        {
          "source": "/bigben",
          "function": "bigben"
        },
        {
          "source": "**",
          "destination": "/index.html"
        },
        {
          "source": "!/@(js|css|svg|jpg|png|gif|ico|json|html)/**",
          "destination": "/index.html"
        }
      ]
      // ...
    }
  ]
}

How can I set /bigben to use this custom domain (that is already configured in Firebase for hosting/the frontend create-react-app? I've seen removing index.html from the build folder, but isn't that needed for CRA?

Brian Burton · Accepted Answer · 2021-04-08 16:36:30Z

2

I know the docs say your source should look like that, a simple path, but it never seems to work for me either. Change your source for bigben from:

"source": "/bigben",

to this:

"source": "/bigben/**",

After that it should do the rewrite correctly.

Edit:

Also your rewrites are out of order and so all of your source files are being rewritten to index.html. Here are my recommended changes:

{
  "hosting": [
    {
      "target": "production",
      "public": "build",
      "rewrites": [
        {
          "source": "/bigben/**",
          "function": "bigben"
        },
        {
          "source": "!**/*.*",
          "destination": "/index.html"
        }
      ]
      // ...
    },
    {
      "target": "staging",
      "public": "build",
      "rewrites": [
        {
          "source": "/bigben/**",
          "function": "bigben"
        },
        {
          "source": "!**/*.*",
          "destination": "/index.html"
        }
      ]
      // ...
    }
  ]
}

edited Apr 8, 2021 at 16:36

answered Apr 8, 2021 at 6:48

Brian Burton

3,85020 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

user2521295 Over a year ago

Thank you! Still getting the You need to enable JavaScript to run this app. (index.html of public: build) after doing this, both after redeploying on production and restarting emulators

Brian Burton Over a year ago

@user2521295 Updated my answer

user2521295 Over a year ago

Thank you! Will try this-- by out of order-- I thought the docs said to add the function rewrites before { source: "**", destination: index.html }? What order should they be in?

Brian Burton Over a year ago

The problem is your third rewrite after your wildcard. Your second rewrite statement says to rewrite anything that's not /bigben to index.html. It never hits your third rewrite statement, so the visitor can't download your JS/CSS assets (I believe, could be wrong).

user2521295 Over a year ago

Ahh got it, thank you! Will review the CSS/JS assets rewrite-- it hasn't been a problem so far (as in people have been able to access the site with all correct styling/scripts) but have not tried downloading directly.

|

Collectives™ on Stack Overflow

Firebase hosting rewrites for Cloud Functions firebase.json not working with multiple environments

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related