reactjs - Firebase function doesn't execute when called from domain

Question

I have a React web app with a Firebase backend created with NodeJS. I use Firebase Functions. My Firebase functions execute when I call them from either localhost or from Postman. But when I call the functions from my domain (moonio.io), they are not executed, and the only thing that happens is that I get my index.js file back. Therefore, I'm suspecting my problem to be caused by the rewrites in the hosting part of the firebase.json file (api address "https://europe-west3-cryptocurrency-tracker-moonio.cloudfunctions.net/api" getting rewritten to "/index.html")?

firebase.json

{
  "hosting": [
    {
      "target": "app",
      "public": "app/build",
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    }
  ],
  "functions": {
    "source": "functions"
  }
}

package.json for Firebase functions

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "lint": "eslint .",
    "serve": "firebase emulators:start --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "12"
  },
  "main": "index.js",
  "dependencies": {
    "axios": "^0.21.1",
    "express": "^4.17.1",
    "firebase": "^8.1.1",
    "firebase-admin": "^9.2.0",
    "firebase-functions": "^3.13.1",
    "google-auth-library": "^6.1.3",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "eslint": "^5.12.0",
    "eslint-plugin-promise": "^4.0.1",
    "firebase-functions-test": "^0.2.0"
  },
  "private": true
}

package.json for my React app

{
  "name": "cryptotracker",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/react-fontawesome": "^0.1.13",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "axios": "^0.20.0",
    "chart.js": "^2.9.4",
    "chartjs": "^0.3.24",
    "colorthief": "^2.3.2",
    "cra-template": "1.0.3",
    "firebase": "^8.2.3",
    "history": "^5.0.0",
    "install": "^0.13.0",
    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.20",
    "npm": "^6.14.10",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-chartjs-2": "^2.11.1",
    "react-dom": "^16.13.1",
    "react-google-login": "^5.2.2",
    "react-hook-form": "^6.9.1",
    "react-loading-skeleton": "^2.1.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "react-virtualized-select": "^3.1.3",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "retry-axios": "^2.3.0",
    "styled-components": "^5.2.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "https://europe-west3-cryptocurrency-tracker-moonio.cloudfunctions.net/api"
}

question from:https://stackoverflow.com/questions/65860388/firebase-function-doesnt-execute-when-called-from-domain

Answer 1

After many hours I finally found out the problem(s).

1. Need to add another rewrite to the firebase.json file for taking care of the api. All the requests to the api must go to the corresponding api function in Firebase functions, and all other requests will go to index.html, as per the requirement for single page applications. Thus, the rewrite part of firebase.json needs to look like this:

"rewrites": [
        {
          "source": "/api/**",
          "function": "api"
        },
        {
          "source": "!/api/**",
          "destination": "/index.html"
        }
      ]

2. The proxy in the package.json file is for development purposes only. It will not work in production. As long as you have your custom domain set up, Firebase will automatically link this domain to your functions. So since my custom domain is moonio.io, the Firebase functions can be executed by sending a request to moonio.io/api/<FUNCTION_NAME>. For requests to these endpoints to work, it is important that you also include "/api" in the request url in your functions setup in node.js. I am using express, so a sample function of my index.js file looks like this (notice how "/api" is part of the url):

const app = require("express")();
const functions = require("firebase-functions");

app.post("/api/signin", signIn);

exports.api = functions.region("us-central1").https.onRequest(app);

3. Also, it is necessary to include "/api" in the beginning of the url when making requests from the frontend to the Firebase functions, as I have done in the following sample function:

axios.post("/api/signin", userData)

4. Firebase functions only works with Firebase hosting in us-central1. If you are using another location, change it according to my code sample in part 2.