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: 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.

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. — Per Hornshøj-Schierbeck
– Per Hornshøj-Schierbeck, Commented Mar 12, 2015 at 12:05

PowerStat · Accepted Answer · 2019-08-09 05:41:28Z

13

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

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

run firebase init
choose the host option
rewrite all to index:yes
overwrite to dist/index :no

and then firebase deploy

and then solve the problem

edited Aug 9, 2019 at 5:41

PowerStat

3,8638 gold badges37 silver badges62 bronze badges

answered Aug 9, 2019 at 5:20

li jing

1311 silver badge2 bronze badges

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

1 Comment

Brian Li Over a year ago

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.

Paul Razvan Berg · Accepted Answer · 2017-07-23 09:32:44Z

8

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.

answered Jul 23, 2017 at 9:32

Paul Razvan Berg

22.3k14 gold badges92 silver badges141 bronze badges

Comments

Suraj Rao · Accepted Answer · 2021-11-14 15:40:26Z

8

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

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

edited Nov 14, 2021 at 15:40

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Nov 14, 2021 at 15:17

Md Rafiul Alam

911 silver badge2 bronze badges

Comments

Nobu Aquino · Accepted Answer · 2015-03-14 04:02:39Z

6

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.

answered Mar 14, 2015 at 4:02

Nobu Aquino

613 bronze badges

Comments

Per Hornshøj-Schierbeck · Accepted Answer · 2015-03-12 13:35:53Z

2

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.

edited Mar 12, 2015 at 13:35

answered Mar 12, 2015 at 12:20

Per Hornshøj-Schierbeck

15.2k21 gold badges84 silver badges103 bronze badges

Comments

Shoaib Chikate · Accepted Answer · 2019-09-27 06:03:27Z

2

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

answered Sep 27, 2019 at 6:03

Shoaib Chikate

8,97112 gold badges50 silver badges70 bronze badges

Comments

Abdullah · Accepted Answer · 2022-10-17 07:37:58Z

2

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

answered Oct 17, 2022 at 7:37

Abdullah

3,0611 gold badge23 silver badges33 bronze badges

Comments

tuomastik · Accepted Answer · 2019-05-10 07:28:44Z

0

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.

edited May 10, 2019 at 7:28

tuomastik

4,9856 gold badges46 silver badges52 bronze badges

answered May 10, 2019 at 7:13

Chinedu Ofor

76911 silver badges11 bronze badges

Comments

Stacky · Accepted Answer · 2020-11-23 14:41:21Z

0

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

edited Nov 23, 2020 at 14:41

answered Nov 16, 2020 at 20:39

Stacky

31 silver badge5 bronze badges

Comments

Badeh · Accepted Answer · 2022-07-04 00:23:41Z

0

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.

edited Jul 4, 2022 at 0:23

answered Jul 4, 2022 at 0:21

Badeh

11 bronze badge

Comments

Code on the Rocks · Accepted Answer · 2024-11-12 21:27:25Z

0

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.

answered Nov 12, 2024 at 21:27

Code on the Rocks

18.8k6 gold badges81 silver badges99 bronze badges

Comments

Shanil KV · Accepted Answer · 2024-06-06 21:28:55Z

-1

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

answered Jun 6, 2024 at 21:28

Shanil KV

1

1 Comment

Community Over a year ago

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.

Collectives™ on Stack Overflow

Firebase deploy 404 can't find index.html

12 Answers 12

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related