Hosting + cloud functions

I think the order of the rules matter but not 100% sure.
For a CRA, client side react app, you need /** for the source, otherwise it won't be able to serve the static assets in the same folder.
1
    "rewrites": [
2
      {
3
        "source": "/api",
4
        "function": "api"
5
      },
6
      {
7
        "source": "/**",
8
        "destination": "/index.html"
9
      }
10
    ]
Copied!
Then In a cloud function. This example uses express, which is useful if you want to append multiple routes eg /api/books , /api/projects where books and projects can be express routes in the cloud function.  
but you don't have to use express. Eg you have one route you could just handle that directly. 
Express can be useful to add express middleware to the request, like cors or auth. 
1
const functions = require('firebase-functions')
2
const express = require('express')
3
const app = express()
4
app.get('*', (req, res) => {
5
  res.send("Hello from the API")
6
})
7
exports.api = functions.https.onRequest(app)
Copied!
full firebase.json
1
{
2
  "hosting": {
3
    "public": "build",
4
    "ignore": [
5
      "firebase.json",
6
      "**/.*",
7
      "**/node_modules/**"
8
    ],
9
    "redirects": [],
10
    "rewrites": [
11
      {
12
        "source": "/api",
13
        "function": "api"
14
      },
15
      {
16
        "source": "/**",
17
        "destination": "/index.html"
18
      }
19
    ]
20
  },
21
  "firestore": {
22
    "rules": "firestore.rules",
23
    "indexes": "firestore.indexes.json"
24
  },
25
  "functions": {
26
    "predeploy": [],
27
    "ignore": [
28
      "**/examples/**"
29
    ],
30
    "source": "functions"
31
  },
32
  "storage": {
33
    "rules": "storage.rules"
34
  }
35
}
Copied!
Hosting your React.js and Node.js Apps for Free with Firebase
Medium
Local dev
for local dev, local host talking to firebase cloud function
In cloud function accept cors
1
exports.yourFuncation = functions.https.onRequest((request, response) => {
2
response.set('Access-Control-Allow-Origin', "*")
3
/*Your code and response*/})
Copied!
In firebase.json  - setting headers for cloud functions via hosting
1
{
2
...
3
"functions": {
4
    "predeploy": [
5
      ...
6
    ],
7
    "headers": [{
8
        "key": "Access-Control-Allow-Origin",
9
        "value": "*"
10
    }]
11
}}
Copied!
as well as setting headers under hosting
1
"rewrites": [{
2
"source": "**",
3
"destination": "/index.html",
4
"headers": [{
5
    "key": "Access-Control-Allow-Origin",
6
    "value": "*"
7
}]}]}
Copied!
full firebase.json
1
{
2
  "hosting": {
3
    "public": "build",
4
    "ignore": [
5
      "firebase.json",
6
      "**/.*",
7
      "**/node_modules/**"
8
    ],
9
    "redirects": [],
10
    "rewrites": [
11
      {
12
        "source": "/api",
13
        "function": "api"
14
      },
15
      {
16
        "source": "/**",
17
        "destination": "/index.html"
18
      }
19
    ],
20
    "headers": [
21
      {
22
        "source": "index.html",
23
        "headers": [
24
          {
25
            "key": "Access-Control-Allow-Origin",
26
            "value": "*"
27
          }
28
        ]
29
      },
30
      {
31
        "source": "/firebaseCustomToken",
32
        "headers": [
33
          {
34
            "key": "Access-Control-Allow-Origin",
35
            "value": "*"
36
          }
37
        ]
38
      }
39
    ]
40
  },
41
  "firestore": {
42
    "rules": "firestore.rules",
43
    "indexes": "firestore.indexes.json"
44
  },
45
  "functions": {
46
    "predeploy": [],
47
    "headers": [
48
      {
49
        "key": "Access-Control-Allow-Origin",
50
        "value": "*"
51
      }
52
    ],
53
    "ignore": [
54
      "**/examples/**"
55
    ],
56
    "source": "functions"
57
  },
58
  "storage": {
59
    "rules": "storage.rules"
60
  }
61
}
Copied!
how to call firebase callable functions from localhost?
Stack Overflow
​

Hosting - Previous

Hosting

Next - Firebase Admin

Firebase admin

Last modified 10mo ago

Copy link

Contents

Local dev