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, and the hosted version works fine when I load it using chrome on my computer, but the hosted site fails to load using firefox or any other browser. The hosted site also fails to load using any browser, including chrome, on other machines.

Here's the link to the hosted site: https://physics-coach.firebaseapp.com/ Here's the link to the github repo for this site: https://github.com/occam98/physicscoach2

I've tried toubleshooting using the developer tools, but I can't seem to make much headway—the only message I get in the console when the site fails to load is:

It looks like you're using the development build of the Firebase JS SDK. When deploying Firebase apps to production, it is advisable to only import the individual SDK components you intend to use.

For the CDN builds, these are available in the following manner (replace with the name of a component - i.e. auth, database, etc):

https://www.gstatic.com/firebasejs/5.0.0/firebase-.js rollbar.min.js:2:24504

I'd appreciate any troubleshooting advice about how to solve this problem.

Alexander Staroselsky Alexander Staroselsky · Accepted Answer · 2019-05-22T20:30:46

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!

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

1 Answers