2

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

Phil
  • 157,677
  • 23
  • 242
  • 245
Sheep Snow
  • 85
  • 8
  • Which file is giving you the unexpected token error? Have you tried setting it to public instead of build? – jmargolisvt Apr 07 '20 at 00:25
  • Follow the links in your console. Your `main.js` file is actually loading the `index.html` contents – Phil Apr 07 '20 at 00:25
  • Can you show what the contents of your `build` directory look like? – Phil Apr 07 '20 at 00: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 Apr 07 '20 at 05:40
  • I put the build above in an edit as its unreadable in the reply section – Sheep Snow Apr 07 '20 at 05:52

3 Answers3

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.

Phil
  • 157,677
  • 23
  • 242
  • 245
  • 1
    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 Apr 07 '20 at 05:57
  • 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 : https://monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css". – Sheep Snow Apr 07 '20 at 06:10
  • 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` ¯\\_(ツ)_/¯ – Phil Apr 07 '20 at 06:14
  • 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 – Sheep Snow Apr 07 '20 at 07:03
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.

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
  • 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 Apr 07 '20 at 06:00
  • 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 https://stackoverflow.com/questions/22631158/resource-interpreted-as-stylesheet-but-transferred-with-mime-type-text-html-see and in the build folder it looks like `````` – Sheep Snow Apr 07 '20 at 06:20
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!

Ayub.eth
  • 1