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

Which file is giving you the unexpected token error? Have you tried setting it to public instead of build? — jmargolisvt
– jmargolisvt, Commented Apr 7, 2020 at 0:25
Follow the links in your console. Your main.js file is actually loading the index.html contents — Phil
– Phil, Commented Apr 7, 2020 at 0:25
Can you show what the contents of your build directory look like? — Phil
– Phil, Commented Apr 7, 2020 at 0:30
Ah sorry I did not expect a reply so quickly, jamargolisvt , there is answers on stackoverflow that i should set the public to build I will try to set it to public and post my what happens. @Phil i found that to be the case also , but i do not know why .. ofcourse I will add it in the edit. — Sheep Snow
– Sheep Snow, Commented Apr 7, 2020 at 5:40
I put the build above in an edit as its unreadable in the reply section — Sheep Snow
– Sheep Snow, Commented Apr 7, 2020 at 5:52

Phil · Accepted Answer · 2020-04-07 00:39:38Z

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.

edited Apr 7, 2020 at 0:39

answered Apr 7, 2020 at 0:33

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sheep Snow Over a year ago

Yes you are 100% right, and there no such folder within my directory either, this only exists within the build. The "homepage" is set to my github page for this app, I feel this is the mistake then. Thank you! The reason for using firebase in the first place was because the app also did not work as intended on github pages and I was told that github pages is static and cannot do what I wish.

Sheep Snow Over a year ago

After making the changes to include a MonsterPWA folder I an still getting a blank webpage and the same "cannot find css" error. \build\MonsterPWA\static\css\main.7bf83f0f.css C:\Users\locks\Desktop\EditMonster\build\MonsterPWA\static\js\main.3267ab84.js Error : monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css".

Phil Over a year ago

Everything looks right to me except for your manifest.json file. I don't know enough about your build system (or React in general, I'm more of a Vue fan) to help much more suffice to say that /MonsterPWA/manifest.json does not exist but /manifest.json does. Maybe you just need to edit index.html ¯\_(ツ)_/¯

Sheep Snow Over a year ago

i dont know why, how or what happend but its working now ... it was giving me errors all day i kept changing small things, i gave up 10 mins ago and it just worked after refreshing .... but thank you ... I have no idea what the fix was

Frank van Puffelen · Accepted Answer · 2020-04-07 00:33:37Z

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.

answered Apr 7, 2020 at 0:33

Frank van Puffelen

603k85 gold badges895 silver badges869 bronze badges

2 Comments

Sheep Snow Over a year ago

Yes as Phil said there seems to be a reason that the build function has taken my github home page and used that as part of the build`s folders. I did not think about it at all when I tried to change my app from github pages to firebase. thank you.

Sheep Snow Over a year ago

I`m still getting the error: Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css". i copied the answer from stackoverflow.com/questions/22631158/… and in the build folder it looks like <link type="text/css" href="/MonsterPWA/static/css/main.7bf83f0f.css" rel="stylesheet">

Ayub.eth · Accepted Answer · 2022-08-26 15:25:56Z

0

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!

answered Aug 26, 2022 at 15:25

Ayub.eth

1

Collectives™ on Stack Overflow

Firebase react.js app deployed - blank page

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related