ReactJS app deployed to firebase hosting not updating after first deployment

Question

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.

Dumb question... are you building it each time before you deploy? — jmargolisvt, May 28 '20 at 16:40
Hi! It would be great if you could add some more info from the deployment log. — nicoqh, May 28 '20 at 16:41
Please, do not add 'solved'. When you accepted an answer, everybody knows that it was solved. SO is a Q&A site — Vega, May 28 '20 at 17:09

score 1 · Accepted Answer · answered May 28 '20 at 16:46

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 :)

Service worker files [should not be cached](https://developers.google.com/web/updates/2019/09/fresher-sw). I believe this is consistent across all browsers that implement them. — abraham, May 31 '20 at 22:18

score 0 · Answer 2 · answered May 28 '20 at 16:42

0

If the deploy is completed and you see a note of that, but the website is not updated then it means that your app bundle has not changed, make sure you run npm run build before running the deploy command

answered May 28 '20 at 16:42

ehab

3,608
13
21

ReactJS app deployed to firebase hosting not updating after first deployment

2 Answers2