🖌️
Firebase+React_Notes
  • Firebase React Notes
  • React + firebase
    • Firebase - Create React app setup
      • Node & nvm
      • Create React App + Firebase
      • Create firebase app
      • Deploying To Firebase Hosting
      • Switching Environments
      • Typescript typings
      • Firebase cloud function local development
      • Resources
    • Firebase React context
      • Motivation
      • Firebase React Context setup
    • Firebase function local dev react
    • React firebase hooks
  • Multiple ENVs
    • Multiple ENVs
    • Manual setup
    • Terraform
  • Firestore
    • Firestore
      • Using a function to check email domain
    • Firestore data model
    • associated Firebase data with Users
    • Firestore write
    • Firestore - read
      • Removing a listener from firestorm
    • Firestore update
    • Persisting data offline
    • Importing json
  • Auth
    • Auth
    • Firebase UI
    • Firebase Auth with React
    • Linking auth accounts
    • Twitter sign in
    • Google sign in
      • Google sign in custom domain
    • Database Auth
      • Custom claims
      • Limit auth to certain domain only
    • Custom tokens
  • Cloud Functions
    • Cloud Functions
    • Set node version
    • Set timeout and memory allocation
    • Call functions via HTTP requests
    • HTTPS Callable
      • HTTPS Callable cloud function auth check email address domain
    • Separate Cloud Function in multiple files
    • Slack integration
    • Twilio firebase functions
    • ffmpeg convert audio
    • ffmpeg transcoding video
  • Storage
    • Security
    • Create
    • Delete
    • Uploading with React to Firebase Storage
    • Getting full path
    • Firebase `getDownloadURL`
    • Saving files to cloud storage from memory
  • Hosting
    • Hosting
    • Hosting + cloud functions
  • Firebase Admin
    • Firebase admin
  • Firebase analytics
    • Firebase analytics
  • Google App Engine
    • Google App Engine
    • GCP App Engine + video transcoding
  • STT
    • STT + Cloud Function + Cloud Task
      • Example implementation
      • `createTranscript`
      • `createHandler`
        • Firebase ENV
    • Other
      • enableWordTimeOffsets
      • STT longRunningRecognize in Cloud function
      • STT + Cloud Function
      • STT + Google App Engine
      • STT via Google Cloud Video intelligence API
  • CI Integration
    • Travis CI integration
    • Github actions integration
  • Visual code
    • Visual code extension
  • Electron
    • Firebase with electron
  • Pricing
    • Pricing
  • Testing
    • Unit testing
  • Privacy and Security
    • Privacy and security
  • Useful resources
    • links
  • Firebase Extensions
    • Firebase extension
  • Chrome Extension
    • Firebase in a chrome extension
  • Cloud Run
    • Cloud Run
Powered by GitBook
On this page

Was this helpful?

  1. Hosting

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.

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

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.

const functions = require('firebase-functions')
const express = require('express')
const app = express()
app.get('*', (req, res) => {
  res.send("Hello from the API")
})
exports.api = functions.https.onRequest(app)

full firebase.json

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "redirects": [],
    "rewrites": [
      {
        "source": "/api",
        "function": "api"
      },
      {
        "source": "/**",
        "destination": "/index.html"
      }
    ]
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": [],
    "ignore": [
      "**/examples/**"
    ],
    "source": "functions"
  },
  "storage": {
    "rules": "storage.rules"
  }
}

Local dev

for local dev, local host talking to firebase cloud function

In cloud function accept cors

exports.yourFuncation = functions.https.onRequest((request, response) => {
response.set('Access-Control-Allow-Origin', "*")
/*Your code and response*/})

In firebase.json - setting headers for cloud functions via hosting

{
...
"functions": {
    "predeploy": [
      ...
    ],
    "headers": [{
        "key": "Access-Control-Allow-Origin",
        "value": "*"
    }]
}}

as well as setting headers under hosting

"rewrites": [{
"source": "**",
"destination": "/index.html",
"headers": [{
    "key": "Access-Control-Allow-Origin",
    "value": "*"
}]}]}

full firebase.json

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "redirects": [],
    "rewrites": [
      {
        "source": "/api",
        "function": "api"
      },
      {
        "source": "/**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "index.html",
        "headers": [
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          }
        ]
      },
      {
        "source": "/firebaseCustomToken",
        "headers": [
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          }
        ]
      }
    ]
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": [],
    "headers": [
      {
        "key": "Access-Control-Allow-Origin",
        "value": "*"
      }
    ],
    "ignore": [
      "**/examples/**"
    ],
    "source": "functions"
  },
  "storage": {
    "rules": "storage.rules"
  }
}

PreviousHostingNextFirebase admin

Last updated 3 years ago

Was this helpful?

LogoHosting your React.js and Node.js Apps for Free with FirebaseMedium
Logohow to call firebase callable functions from localhost?Stack Overflow