Firebase hosted website won't load (but loads locally)

Question

I\'ve built a react app beginning with create-react-app that appears to be working fine in local development. I\'ve uploaded it to firebase hosting using firebase deploy, an

Answer 1

Try changing your firebase.json contents to:

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "/service-worker.js",
        "headers": [{ "key": "Cache-Control", "value": "no-cache" }]
      }
    ]
  }
}

Your current firebase.json points to folder "public", which will not actually contain any HTML/JS/CSS assets from running command npm run build. create-react-app production build command npm run build generates all the compiled HTML/JS/CSS resources to directory "build":

npm run build creates a build directory with a production build of your app. Inside the build/static directory will be your JavaScript and CSS files. Each filename inside of build/static will contain a unique hash of the file contents. This hash in the file name enables long term caching techniques.

Update the configuration, execute npm run build followed by firebase deploy to re-build and re-deploy.

This example also includes configuration to exclude service worker files as well as rewrite rules for the purposes of using a router such as react-router-dom. You can remove them if they do not apply to your project in any way.

Update: Also in constants.js you should update your Firebase imports to the following to resolve the warning. This assumes you are using Firebase Auth and Firebase Realtime Database:

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';

Hopefully that helps!