Search code examples
reactjsfirebasefirebase-hosting

Firebase deploy --only hosting does not update React.js webapp content unless site data is cleared

I'm trying to update a react.js site that has been deployed to firebase. The updated content cannot be accessed without using an incognito window or using Dev Tools > Application > Clear Storage > Clear Site Data.

I'm sure this is a problem more strongly related to Firebase Hosting than React, but there seems to be potential interference between React's service-worker.js file and Firebase. Therefore, I have tagged React for completeness.

React Version: 16.8.6 Firebase CLI Version: 7.1.0

My steps are:

  1. change code
  2. $ npm run build
  3. $ firebase serve --only hosting || firebase deploy --only hosting
  4. visit .web.app or localhost:5000

Expectation: I will see the site with the new changes Reality: I see the old site, without the new changes

Research and attempted solutions:

  1. Setting the Cache-Control Headers

I have tried setting the Cache-Control headers to "no-cache" for service-worker.js in my firebase.json file. {"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]},

This is clearly mentioned in the Create React App deployment documentation here: https://facebook.github.io/create-react-app/docs/deployment

And in numerous Stack Overflow questions, such as the one here: Firebase hosting - force browser to reset cache on new deploys?

Unfortunately, the problem persists, even when my firebase.json file is as shown below. This has led me to believe that there may be a new, more recent issue.

  1. Fiddling with the Service Worker: I have also done research around the service worker itself. It is currently set to 'unregister', but I have set it to 'register' and deployed multiple times with no noticeable change.

I am unsure whether it must be set to 'register', given the advice in #1 above.

****firebase.json****

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
    ]
  }
}

****/src/index.js****

.....
const store = configureStore();
....

serviceWorker.unregister();


****directory structure****

/
firebase.json
firebase.src
build/
      /static
      service-worker.js
      index.html
      ....
....
Solution

  • In the end neither Reactjs nor Firebase Hosting was the source of the problem. I'm just posting this incase someone is in a similar situation and doubts the configuration above, its the correct one, use it.

    Redux-Persist's Persist Gate was not working as expected, causing the app to have mini-crashes every time it was redeployed. The crashes occurred before things like the version number could be updated, making the site look like it hadn't received the update.

    Clearing the cache would solve the Redux-Persist problem, as it clears the data in the local storage, but this made me think it was a browser cache issue when it wasn't.

    If you're using Redux-Persist & Persist Gate and seeing a very similar issue, take a good look at whether Persist Gate is allowing components to render before rehydration. I solved it by using the _persist object in Redux as a flag