CODEWITHSUNDEEP
deploymentfirebase-hosting
Himmel
Himmel

Reputation: 3709

Firebase deploy 404 can't find index.html

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: enter image description here

Here is my public directory, app: enter image description here

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.

Upvotes: 16

Views: 32045

Answers (12)

Code on the Rocks
Code on the Rocks

Reputation: 17606

I ran into this updating an older app and my web/index.html file was out of date. In the body tag, make sure you add this:

 <script src="flutter_bootstrap.js" async></script>

For most apps this is the only thing that should be in the body tag.

Upvotes: 0

Shanil KV
Shanil KV

Reputation: 1

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

Upvotes: -1

Abdullah
Abdullah

Reputation: 2953

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

enter image description here

Upvotes: 2

Badeh
Badeh

Reputation: 1

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.

Upvotes: 0

Md Rafiul Alam
Md Rafiul Alam

Reputation: 91

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

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

Screenshoot here

Upvotes: 8

Stacky
Stacky

Reputation: 3

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

Upvotes: 0

Shoaib Chikate
Shoaib Chikate

Reputation: 8975

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/**"
  ]
}

Upvotes: 2

li jing
li jing

Reputation: 131

"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

Upvotes: 13

Chinedu Ofor
Chinedu Ofor

Reputation: 767

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.

Upvotes: 0

Paul Razvan Berg
Paul Razvan Berg

Reputation: 21400

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.

Upvotes: 8

Nobu Aquino
Nobu Aquino

Reputation: 61

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.

Upvotes: 6

Per Hornsh&#248;j-Schierbeck
Per Hornsh&#248;j-Schierbeck

Reputation: 15196

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.

Upvotes: 2

Related Questions