Firebase deploy 404 can't find index.html

Question

I'm running firebase init and it's creating firebase.json. firebase.json is in the apps root directory, pointing towards my public directory app. See here:

firebase.json

{
  "firebase": "harrison",
  "public": "app",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ]
}

Here is where my firebase.json lives:

Here is my public directory, app:

When I run firebase deploy from the command line, everything seems to upload correctly. I then run firebase open or equivalently go to the deploy site, and I get a 404 saying my index.html was not found when it's CLEARLY in the specified directory.

Becalmed

I have a similar setup with the same problem you decribed. I even put index.html files in several different (sub)folders just to make sure one of them would get loaded. None of the does. – Retouch

Answer 1

"rewrites": [
  {
    "source": "**",
    "destination": "/index.html"
  }

I met the same problem as yours, here is my soluation:

1. run firebase init

2. choose the host option

3. rewrite all to index:yes

4. overwrite to dist/index :no

and then firebase deploy

and then solve the problem

Growing

If you are using a tool like React Router and able to load all routes locally, this should solve issues with firebase serve and firebase deploy. – Hisakohisbe

Answer 2

In my case, I simply had to change the path from public to ./public. This might be a version-control bug. I've opened a pull request.

Minneapolis

Answer 3

I faced the same issue. All you need is to write the below code in your firebase.json file

"rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]

Decrescent

Answer 4

If you are using Yeoman, run grunt build in your project directory to create /dist directory.

Then, run firebase init (in your project directory again) and type the corresponding Firebase app and just press enter in Public Directory(current directory).

Next, change firebase.json to:

{
  "firebase": "<FirebaseAppName>",
  "public": "./dist",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ]
}

Finally, run firebase deploy and firebase open.

Philippa

Answer 5

I think I found the reason for this, since i was having the same issues myself.

If your index.html links to faulty external ressources or even internal ressources that takes too long to load, you will end up with an error. Sometimes you get a 503 error and sometimes you get a 404.

Try reducing your html file untill you figure out what is causing it to fault

Also, link to minified versions of all scripts and css files.

Extrusion

Answer 6

I had same problem and was getting 404 then I found that my index.html was present inside my project folder i.e

dist --> project-folder --> index.html

Hence, my firebase.json became

{
  "firebase": "<FirebaseAppName>",
  "public": "./dist/project-folder",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ]
}

Blanks

Answer 7

I had the same issue, the below solution work for me

Add the below lines in the firebase.json file (which you will find in your root folder)

"rewrites": [
  {
    "source": "**",
    "destination": "/index.html"
  }
]

Redeploy your application with firebase deploy command

Nixie

Answer 8

Your firebase.json file should look like this:

{
  "hosting": {
    "site": "biscayne",
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

Make sure you answer build to

What do you want to use as your public directory?

after running firebase init.

Keldon

Answer 9

Check your node version

node --version

Node versions greater than 10 are not supported. Downgrade to anything lower than 10, if that doesn't work try the following.

firebase login firebase use --add (Choose the right Project ID) firebase init (select hosting, than correct Project ID) if needed (npm run build) firebase deploy

Solution was number 2 Choosing the right Project ID Because somehow firebase commands was referring automatically to a wrong Project ID

Good Luck

Tarragona

Answer 10

I had the same issue and I solve it by answering y on the

? Configure as a single-page app (rewrite all urls to /index.html)?

question. After that I npm run build, then firebase deploy. It worked like a charm.

Hebert

Answer 11

{ "hosting": { "public": "dist\web-app-name\browser", "ignore": [ "firebase.json", "/.*", "/node_modules/" ], "rewrites": [ { "source": "", "destination": "/index.html" } ] } }

Canicula

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Minuend