404 page not found when running firebase deploy

Question

I have built a stunning web app using react and Google's firebase for auth and for database. On my local server, everything runs well. I can authenticate certain users and navigate to the next page upon a successful login. The problem starts when deploying my web app using firebase hosting.

So, first installed the firebase-tools then ran npm run build after that I initialized firebase (i was logged in). Then I ran firebase deploy. After answering the prompted questions, a URL to my supposedly working site was given to me.

Now when I log in using the details that should successfully log me in, I get the error below:

404 Page Not Found The specified file was not found on this website. Please check the URL for mistakes and try again. Why am I seeing this? This page was generated by the Firebase Command-Line Interface. To modify it, edit the 404.html file in your project's configured public directory.

To see this error live, here is the link

Part of the code that should navigate the user to the next page after successful log in is shown below:

import React, { Component } from 'react';
import fire from './Firebase';
import List from './components/List';

class Login extends Component {
  constructor(props) {
    super(props);
    this.login = this.login.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      email: '',
      password: ''
    };
  }

  handleChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  login(e) {
    e.preventDefault();
    fire.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then((u)=>{
        window.location = 'list'; 
    }).catch((error) => {
        console.log(error);
        alert("You don't have priviledges to log in!")
      });
  }

Here is code snippet in the firebase.json:

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  },
  "database": {
    "rules": "database.rules.json"
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  }
}

The error from functions:

=== Deploying to 'my-tutor-d4133'...

i  deploying functions
Running command: npm --prefix "$RESOURCE_DIR" run lint

> functions@ lint /home/superlelo/Desktop/myTutor/mytutor/functions
> eslint .

sh: 1: eslint: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! functions@ lint: `eslint .`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the functions@ lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/superlelo/.npm/_logs/2019-09-26T21_15_49_018Z-debug.log

Error: functions predeploy error: Command terminated with non-zero exit code1

I am not sure of how to fix this, could someone help?

Thanks.

I suspect your `hosting -> public` entry in the `firebase.json` file is not pointing to the directory you built to. If you're building a single-page-app with React, double check you have a `rewrites` entry to redirect all requests to `index.html`. — JeremyW, Sep 25 '19 at 12:23
@JeremyW Thanks, I am not sure if I am doing the double checking in the right way. How do I do what you say I should do, how do I " double check I have a rewrites entry to redirect all requests to index.html" — Nompumelelo, Sep 25 '19 at 16:58
[Edit](https://stackoverflow.com/posts/58096096/edit) your post and include the contents of your `firebase.json` file, I'll add an answer explaining it. — JeremyW, Sep 25 '19 at 17:34
Also, in your `package.json` file, what does your `build` script do? Include that in your edit too please. Are you using CreateReactApp? — JeremyW, Sep 25 '19 at 17:58

score 43 · Accepted Answer · answered Sep 25 '19 at 20:22

43

Your firebase.json file's hosting->public entry is correctly pointed to the build directory. That's good. That's the output directory for Create React App. Unless you intentionally changed where CRA builds to, Firebase should be deploying whatever is in that build folder.

Since you want the routing to occur on the client - handled by React - you need the backend (Firebase) to serve up your React website for ALL routes requested. You do that by adding a rewrites section to your configuration:

"hosting": {
    "public": "build",
    "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
    ],
    "rewrites": [
        {
            "source": "**",
            "destination": "/index.html"
        }
    ]
}

answered Sep 25 '19 at 20:22

JeremyW

5,157
6
29
30

so - I had to add admin privileges using functions and I came across that last added error. I ran 'firebase deploy --only functions` , do you know a work around it? – Nompumelelo Sep 26 '19 at 21:20
Have you tried [this answer](https://stackoverflow.com/a/48603033/8026947)? – JeremyW Sep 27 '19 at 12:26
I have tried all those options, but none of them works. Have you worked with functions enough to anticipate a probable cause and work through? – Nompumelelo Sep 27 '19 at 19:20
Not with that error. I recommend you post a separate question for this problem, someone might have a solution you haven't found. Make sure you list what you've tried in the new question :) Good luck! – JeremyW Sep 27 '19 at 19:52
It was indeed the `/` at the start of `index.html` that fixed it for me, thanks – Jude Fernandes Jun 17 '20 at 19:04

404 page not found when running firebase deploy

1 Answers1

Linked