3

I'm trying to follow step 3 here, "Add Firebase SDKs and initialize Firebase", with the "From Hosting URLs"

I'm including these three scripts inside the head section of the public/index.html page:

  <script src="/__/firebase/6.4.0/firebase-app.js"></script>
  <script src="/__/firebase/6.4.0/firebase-auth.js"></script>
  <script src="/__/firebase/init.js"></script>

However, because this is running locally via create-react-app's react-scripts start command, all requests made to localhost:3000/* must be returning that public/index.html page. Which causes the response to be "You need to enable JavaScript to run this app." HTML page instead of the actual scripts located at myfirebasesite.com/__firebase/* URLs.

When running the firebase serve command, this is not an issue because the localhost serve started from that command returns the scripts as expected. The downside to handling it that way, though, is I no longer can utilize CRA's hot reloading / hot module replacement. Is there any way I can combine those two? 1) Firebase app + auth + init scripts loading successfully and 2) hot reloading / HMR provided by webpack?

I'm tempted to just switch to the "Using module bundlers" approach and have the necessary Firebase packages listed as NPM dependencies and imported in the files they are used, but am more curious about how that combination of the two strengths mentioned above can be attained.

Pat Needham
  • 5,698
  • 7
  • 43
  • 63

1 Answers1

1

I ended up using the proxy configuration specified here. So inside the package.json of my create-react-app directory, I include

"proxy": "http://localhost:5005",

The only caveat is I need to have firebase serve running in a separate terminal tab, alongside npm run start

Pat Needham
  • 5,698
  • 7
  • 43
  • 63