Firebase react.js app deployed - blank page

Question

I am using Firebase for the first time and I deployed a react app I know to be working and have hosted on github pages. I followed the instructions provided by Firebase docs and deployed the app to their website. On loading the website I am greeted with a blank page.

the link: https://monsterpwa.web.app/

the firebase.json file:

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

The previous posts on here are all bout the public sections being changed to build. Other then that I could not find anyone else with a similar question.

The console logs and error that there is an unexpected token '<' in line one column 1, but I also cannot see that.

The manifest file:

{
  "short_name": "Monster App",
  "name": "Monster App D&D Spells and Items",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "/public/media/800x800.png",
      "type": "image/png",
      "sizes": "800x800"
  }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#2d4059;",
  "theme_color": "#2d4059",
  "orientation": "portrait-primary"
}

build

Build 

--> Media  -- > *empty*

--> static  -- > css / js --> each contains two files. main.7bf83f0f & the map version & main.3267ab84 and the map version.

asset-manifest.json
favicon.ico
index.html
manifest.json
service-worker.js
worker.js

Kind regards,

Snow

Answer 1

If you check the JavaScript console of your browser it shows there's a problem loading the CSS.

Resource interpreted as Stylesheet but transferred with MIME type text/html: " https://monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css ".

Uncaught SyntaxError: Unexpected token '<'

From looking at the Network tab, we can see that it is loading this URL https://monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css , but that is returning HTML (due to your rewrite rule).

Make sure that your CSS is generated to build/MonsterPWA/static/css/main.7bf83f0f.css , since that's where Firebase Hosting looks for it.

---

Edit : a quick check shows that the CSS actually exists at https://monsterpwa.web.app/static/css/main.7bf83f0f.css so at build/static/css/main.7bf83f0f.css .

Answer 2

The issue is that you've configured your app to look for assets in a /MonsterPWA directory but that doesn't appear to exist.

For example, your index.html file has

<script type="text/javascript" src="/MonsterPWA/static/js/main.3267ab84.js"></script>

but the file is actually available at /static/js/main.3267ab84.js .

Your rewrite rule is catching all non-existent file requests and returning index.html , hence the warnings about < .

Check your homepage configuration in package.json and / or your PUBLIC_URL environment variable.

Answer 3

Do the following:

• run the command: npm run build
• check firebase.json file to ensure it says "public":"build".. if not make the change
• run the command: firebase deploy

Go grab a coffee!