Firebase Functions and CRA, .js files not found in static asset

user_12461791 0
Viewed 336

I struggle on firebase functions does not load the static .js files, so my index.html stays white. Replacing the cra-index.html with a "non-js" index.html with a simple h1 works fine. Locally, the index.html with javascript is loaded as well!

In my firebase functions index.js i used:

app.use(express.static("client/build/"));

due to the fact that a "non-js" index.html is served fine by:

app.get("/", (req, res) => {
  res.sendFile("index.html");
});

this cant be the problem.

My index.html js-refs looks like this:

    <script src="static/js/2.1ea6fe96.chunk.js"></script>

and my folderstructure looks like this: folderstructure

Can someone help me out? I am 100% sure that i made a mistake in referencing the .js files in the index.html but again, emulating the function by "firebase serve" locally works fine. Does firebase functions require a special style of defining the paths? Someone struggled on this too and can save some of my time?

google-cloud-functions firebase reactjs javascript
1 Answers

firebase serve locally runs multiple “services” including Firebase Hosting and Firebase Cloud Functions. It is Hosting that makes your CRA app available to the browser, not Cloud Functions.

Recognize that you are likely using several services:

  • Hosting
  • Cloud Functions
  • Firestore (and/or Realtime Database…)

You have a few options:

  • deploy to Cloud Functions and to Firebase Hosting
  • deploy to Cloud Functions, run hosting locally (firebase serve --only hosting)
  • deploy to Cloud Functions, host your CRA app in some other way (e.g. locally with npm start, or deploy it to a webserver somewhere)

There are also the Firebase Emulators you might play with, now with a new Emulator UI!!

user_2293260
Related