🖌️
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
  • Restricted to one "project" setup with multiple apps?
  • Authorisation
  • A complete example of the Firebase JSON with hosting only

Was this helpful?

  1. React + firebase
  2. Firebase - Create React app setup

Deploying To Firebase Hosting

We are almost ready to deploy our react app to Firebase hosting. First we need to add a line to firebase.json to automatically build our application before deploying. Otherwise you will forget to do it. Add the following line to the hosting section:

"predeploy": ["npm --prefix \"$RESOURCE_DIR/..\" run build"]

In context

{
  "functions": {
    "predeploy": ["npm --prefix \"$RESOURCE_DIR/..\" run build"]
  },
  "hosting": {
    "public": "build", 
    "predeploy": ["npm --prefix \"$RESOURCE_DIR/..\" run build"]
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**",
      "**/functions/**",
      "**/public/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Now we can deploy:

firebase deploy

React will build and a link will be provided in the console. You should be able to click on that link your React application will load!

Restricted to one "project" setup with multiple apps?

If your company doesn't allow you to create as many projects as possible (cost is mostly the reason why), you want to setup Apps as a way to create your host.

You can add multiple domains via the UI.

Once you've done that you should add hosting configuration to your firebase.json file and add the deployment step to package.json.

// firebase.json
{
  "hosting": {
    "site": "<site-name>",
    ...
  }
}

// package.json
{
  "scripts": {
    "deploy:hosting": "firebase deploy --only hosting:<site_name>",
    ...
  }
}

To further simplify your life you can also aliasing the project name:

$ firebase use --add                                                                                 ✔  17:37:51 
> ? Which project do you want to add? <environment-specific-project-name>
> ? What alias do you want to use for this project? (e.g. staging) <environment-alias>

> Created alias dev for <environment-specific-project-name>.
> Now using alias dev (<environment-specific-project-name>)
                                                                              ✔  17:39:09 
$ firebase deploy -P <environment-alias>

Authorisation

Also, make sure to add the new domain to authorised domains if you want to use Authentication. This can be accessed via the UI.

The multisite feature supports a maximum of 36 sites per Firebase project.

A complete example of the Firebase JSON with hosting only

PreviousCreate firebase appNextSwitching Environments

Last updated 5 years ago

Was this helpful?

https://firebase.google.com/docs/hosting/full-config#firebase-json_example
Share project resources across multiple sites  |  Firebase DocumentationFirebase
Logo