Search code examples
javascriptreactjsfirebasecommand-line-interfacefirebase-hosting

ReactJS app deployed to firebase hosting not updating after first deployment

hope you all are doing well and staying safe.

I have been trying to deploy my react app to the net using firebase, and all was going well until i tried updating it/redeploying it. It shows ✔ Deploy complete! in my terminal but i check the website, it shows no update. I have tried putting the following code into firebase.json:

"headers": [
      {
        "source": "/service-worker.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      }
    ]

But that didn't change anything. My steps to release the app have been the following:

npx create-react-app firebase-test
cd firebase-test
firebase login
firebase init #I only chose hosting, chose to configure as a single-page application, wrote build as my public folder
npm run build
firebase deploy

It shows the first deployment, but when I try to deploy again, I see no updates.

Solution

  • Your service-worker.js is probably still cached, since you added the Cache-Control header after you first visited the site.

    This means that your browser hasn't tried to request the file again, but serves it from memory. Even a standard refresh (CTRL/CMD + R) won't help.

    Try a hard refresh (CTRL+Shift + R), or clear the application's cache manually in your developer tools. Your browser will re-download service-worker.js with the correct Cache-Control header, and the problem won't occur again.

    And, as always, make sure you actually build your app before deploying :)