Firebase Cloud Functions + Hosting - 404 Not Found

2
votes

I'm building my web app on top of Firebase cloud functions, and hosting. My client was built with create-react-app, and I have a small express server running in a cloud function that serves the app build.

Everything works fine in a normal browser window however, I am having an issue where if I go to any url that is not '/' in incognito mode or a mobile device I get a 404 and "Not Found"

ie: hitting "https://144blocks.com/week" directly will load fine in a normal browser window but throws the following error in incognito and mobile.

enter image description here

My firebase function for serving the site is:

functions/index.js

const functions = require('firebase-functions');
const express = require('express');
const fs = require('fs');
const path = require('path');

const app = express();

app.get('/*', (req, res) => {
    const fullPath = path.normalize(__dirname + '/../react-ui/build/index.html');

    res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
    res.sendFile(fullPath);
});

exports.app = functions.https.onRequest(app);

In my client my firebase.json file:

firebase.json

{
  "hosting": {
    "public": "react-ui/build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "app"
      }
    ]
  }
}

I'm not sure why I can't hit any route directly aside from '/' in an incognito window or a mobile device. Ideally, I want all my routes to flow through the one app.get(/* on my express server and have my client handle the routing.

3
firebaseexpressgoogle-cloud-functionsfirebase-hostingincognito-mode
fyi: that URL gives a 404 for me in Chrome on a Mac too. The app looks great btw, at least in the homepage animation. :-) – Frank van Puffelen
@FrankvanPuffelen thanks for double checking and the compliments on the app 😀 – Onaracs
@Onaracs how did you end up fixing this? – Elise Chant

3 Answers

1
votes

There is currently a problem with Firebase Hosting, which appears to be affecting a number of sites, including two of my own. You can stay up-to-date with their status updates via this link.

0
votes

I am still not 100% sure as to why this is working however I fixed the issue by: 1. In my functions/index.js file, updating the fullPath because I believe that the __dirname + '/../react-ui/build/index.html' wasn't resolving.

My name functions/index.js file:

const functions = require('firebase-functions');
const express = require('express');
const path = require('path');

const app = express();

app.get('/*', (req, res) => {
    const fullPath = path.normalize(__dirname + '/build/index.html');

    res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
    res.sendFile(fullPath);
});

exports.app = functions.https.onRequest(app);
  1. On my build process, I'm moving the build directory into the functions folder to get deployed to Firebase with the functions so my project directory when I'm getting ready to deploy looks like where the build directory in functions and react-ui is identical: enter image description here

If anyone has more insight into why this is exactly working I would appreciate additional information.

Thanks!

0
votes

Try running firebase login. I had this exact issue and it was because my login session had expired.

Alternatively, try firebase login --no-localhost if you're having trouble with the standard login.

If you're using ci/cd, use firebase login:ci --no-localhost, save your ci token to your environment under FIREBASE_TOKEN and deploy with firebase deploy --only functions --token $FIREBASE_TOKEN.