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.

Solution

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

Comments

[JeremyW]

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.

[elolelo]

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?

[JeremyW]

Have you tried this answer?

[elolelo]

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?

[JeremyW]

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!

[Jude Fernandes]

It was indeed the / at the start of index.html that fixed it for me, thanks

[PhoonOne]

Can confirm adding the rewrite block worked