How do I configure the rewrite and map prefixed dynamic route path in firebase hosting and functions?

Question

I have firebase page and functions enabled. I want to have a api routes like the following:

1. https://mmydomain.com/api/generatorPerson
2. https://mmydomain.com/api/generateLead
3. https://mmydomain.com/api/and_so_on

I did follow this guide from Firebase team https://youtu.be/LOeioOKUKI8 (Dynamic Node apps) in which he mapped or hooked the path https://mmydomain.com/timestamp to the firebase function 'exports.app' where he has /timestamp express route path. His code is something like the one below:

functions/index.json

const express = require('express');
const functions = require('firebase-functions');

const app = express();

app.get('/timestamp', (request, response) =>{
    response.send('${Date.now()}');
});

exports.app = functions.https.onRequest(app);

public/firebase.json

{
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "/timestamp",
        "function": "app"
      }
    ]
  }
}

Now my goal is kinda the same but I want to prefix the path with 'api' so that I can have api paths that I listed above. I tried working first the https://mmydomain.com/api/generatorPerson using the functions setup/config and firebase config below. It deploys with no error but I get 404 error.

functions/index.json

const faker = require('faker');
const express = require('express');
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();

const app = express();

app.get('/api/generatePerson', (request, response) =>{
    let randomName = faker.name.findName();
    let randomEmail = faker.internet.email();
    let randomPhoneNumber = faker.phone.phoneNumber();
    let randomBirthDay = faker.date.past();
    let randomAddress = faker.address.streetAddress();
    let randomJobTitle = faker.name.jobTitle();
    let randomJobDescription = faker.name.jobDescriptor();
    let randomCompany = faker.company.companyName();

    let person = {
        name: randomName,
        email: randomEmail,
        phoneNumber: randomPhoneNumber,
        birthday: randomBirthDay,
        address: randomAddress,
        work: {
            jobTitle: randomJobTitle,
            jobDescription: randomJobDescription,
            company: randomCompany
        }
    };

    response.send(person);
});

exports.app = functions.https.onRequest(app);

public/firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "/api/**",
        "function": "app"
      }
    ]
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"%RESOURCE_DIR%\" run lint"
    ]
  }
}

I used pattern /api/**since I want all the sub routes be prefixed with api and mapped them to the exports.app. What's the problem of my code? Or am I doing the prefixing wrong?

Answer 1

I managed to resolved the problem by:

1. Cleaned the firebase.json with any comment artifacts.
2. Deploy both hosting and functions.
3. If the problem still there wait a couple of minutes or refresh the http call of your API. After that it will work.