Firebase deploy not updating JS file

Question

I deployed a Firebase app, and made a change to one of the JavaScript files in the project. I re-executed firebase deploy from the project directory, but the files on the site are not updating. When I deploy, the account management shows that an update occurs, but the file remains unchanged. Am I doing something incorrectly? How can I fix/troubleshoot this? Any help would be appreciated.

Thanks

David East · Accepted Answer · 2022-03-21T16:41:52.957

137

If the deploy is successful, this is likely a caching issue.

You can try pressing cmd+shift+R (ctrl+shift+R on Windows) to do a hard refresh of the cache.

Try going to the file's URL directly (https://<my-app>.web.app/app.js), and do a hard refresh. You should see it update to what you have locally.

With Chrome, you can have the cache disable when DevTools are open by selecting the "Disable cache" option in the Network tab.

edited Mar 21 '22 at 16:41

answered Dec 10 '15 at 04:40

David East

31,526
6
67
82

1

@SA__, are you interested in using Firebase Hosting? If so, I can help. – David East Dec 11 '15 at 04:58
Thanks! This worked. I'm a little embarrassed I didn't think of this myself... :) – user3660665 Dec 12 '15 at 19:03
@DavidEast, I have the same problem, where Firebase deploy is not updating JS file, I went to _https://.firebapp.com/app.js_ as suggested, to notice that it has not been updated to what I have locally. – SpaceX Mar 16 '16 at 01:05
Had a hiccup in hosting. It should be good now! Let me know if you're still having issues. – David East Mar 16 '16 at 01:35
I will now use hard refresh bigly. Thank you. – Leo Folsom Jun 12 '17 at 15:47
7

@DavidEast while this is helpful for debugging/developing. Some of my users see the old version. How can I force their browser to load the new version? Thanks! – bernatfortet Aug 23 '17 at 02:30
I have the same problem but clearing cash and hard cash empty didn't worked! – Mehrnoosh Dec 18 '17 at 06:04
THANK YOU, this drove me crazy – kumail Jun 07 '18 at 03:00
4

@user3660665 you did the right thing in calling for help. 4 years later, it helped me tremendously as I made the same mistake. Because without your question I would not have found the answer. So thank you. Besides, a lot of humiliation is a bit of humility - good for the soul ! Let's continue to fail toward perfection... – Titou Feb 21 '19 at 12:26
same here 4 years later! But for some reason https://.firebapp.com/app.js showed nothing!? Any idea which url could enable me to view my public folder on Firebase Hosting? – Yo Apps Nov 12 '19 at 14:44
3

This is not the right answer if the problem is with a client (that shouldn't need to do a clean to see changes). Does anybody know how to fix that? – Gustavo Contreiras Sep 12 '20 at 03:06
1

If by client you mean another person at another computer, the problem is with how long you are setting the browser cache for in the `Cache-Control` header. Firebase sets a 5 minute cache by default so the site will update after that time period if the client does not refresh themselves. Make sure you are not setting it for a long period of time. If that does not fix it then you have a different problem, such as not deploying correctly or you have an improperly configured service worker that's aggressively caching the page. – David East Sep 15 '20 at 15:41

score 60 · Answer 2 · edited Oct 28 '17 at 05:35

60

make sure you're building any new changes you've made before deploying.

For example if you have an angular 2 application and are using the angular cli type ng build then firebase deploy.

To clear cache press Ctr+F5 or better use incognito Mode for Development. using Incognito Mode for force reload works well for Mobile as well as desktop.

edited Oct 28 '17 at 05:35

Hitesh Sahu

41,955
17
205
154

answered Nov 27 '16 at 13:45

aheigins

2,574
3
19
26

1

for me fas the same problem. used npm run-script build – ihavenokia May 25 '18 at 14:09
gets me every time this. Thanks – GrahamJRoy Feb 03 '22 at 16:29
Man, I was going insane. Thanks for the reminder. – Chad Mx Nov 12 '22 at 18:07

score 24 · Answer 3 · answered May 19 '20 at 18:47

24

If you're using React or Vue, do not forget to run the build command like npm run build before running the command firebase deploy

answered May 19 '20 at 18:47

lorem_impus

320
3
9

Doesn't `firebase deploy` already run `npm run build`? – Zorayr Dec 11 '20 at 02:33
1

Well, we'll have to look that up to figure out what `firebase deploy` does under the hood. But as far as I'm concerned, our changes don't show up after running only that command like the main question asked. – lorem_impus Dec 16 '20 at 10:13
Also in Angular (`ng build`) – arielhasidim Dec 09 '22 at 22:45

score 15 · Answer 4 · edited Dec 29 '19 at 15:40

15

I had same issue and I did clear the cache and everything but I still had the same problem, then run

yarn build

Then I could see my latest changes.

edited Dec 29 '19 at 15:40

dhilt

18,707
8
70
85

answered Dec 18 '17 at 06:12

Mehrnoosh

879
2
12
27

4

my god, i was asking WTF was happening with my deploys. of course, it uploads the public build not my dev code... thanks for showing the light. – Maximiliano Poggio Jul 16 '18 at 13:51
@MaximilianoPoggio no problem – Mehrnoosh Mar 05 '20 at 08:40

score 4 · Answer 5 · answered Mar 04 '20 at 12:06

4

To not ever again forget to build before deploying I put this on my package.json:

"scripts": { "build": "node build/build.js && firebase deploy" }

That way I don't have to remember about it. Automate what you can when it comes to deployment.

answered Mar 04 '20 at 12:06

jean d'arme

4,033
6
35
70

score 4 · Answer 6 · answered Aug 25 '21 at 17:37

4

I had a similar issue as well. I was using React.js to build a Covid Tracker, and I noticed a bug in my code. After fixing it, I was running firebase deploy but it wasn't doing anything.

Long story short, you need to build the project before deploying it. Running npm run build will create a new optimized version of your project, and then firebase deploy will then go ahead and update your website.

answered Aug 25 '21 at 17:37

VishnuVelayuthan

91
2

you're building a covid what ? please elaborate :) – martis martis Jul 26 '23 at 07:45

score 3 · Answer 7 · answered Jul 02 '18 at 19:59

3

Try the same hosting URL in Incognition window, it works me when I go to incognito windows as I have maintained localhost and domain URL in the same window.

Try it, it may be an issue for you too, Thanks

answered Jul 02 '18 at 19:59

score 2 · Answer 8 · answered Nov 30 '16 at 00:47

refreshing your web- browser

In most Windows and Linux browsers: Hold down Ctrl and press F5.

In Apple Safari: Hold down ⇧ Shift and click the Reload toolbar button.

In Chrome and Firefox for Mac: Hold down both ⌘ Cmd+⇧ Shift and press R.

I hope it helps

Source: https://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache

score 2 · Answer 9 · answered Aug 03 '20 at 09:34

2

I faced a similar problem where I build the project, hard reset cache and nothing worked. Then I realised I had layers of cloudflare cdn in front which was giving a cache data. So if you have any CDN in front, disable it while developing.

answered Aug 03 '20 at 09:34

Vinay Prabhu

93
8

score 1 · Answer 10 · edited Jun 20 '20 at 09:12

Well, I was developing a PWA. I occured the same problem which above steps didn't solve.. So I tried this method, which found to be helpful..

Try deleting the map.js and re-run npm run build twice. Why twice?? Because the first one yields an error but it also rebuilds the map.js file which actually corresponds the changes of the .js files. Finally firebase deploy should give you the working site that you wanted to host. Below is the image of my project files which includes the location of file to be deleted.

score 1 · Answer 11 · answered Mar 04 '19 at 21:04

on React(create-react-app)- In case someone gets here for the same reason i did: I had an issue of redeploying the project. the deploy worked at first but when i tried to rebuild(npm run build) and redeploy(firebase delpoy), my site showed a firebase error page(after updating cache with ctrl+shift+r, as suggested here). After a long check i realized i should add rewrites to my firebase.json, so it will look like this:

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [ {
      "source": "**",
      "destination": "/index.html"
    } ]
  },
  "storage": {
    "rules": "storage.rules"
  }
}

score 1 · Answer 12 · answered Feb 05 '21 at 04:56

1

The other way around is deleting the dist/<app_name> folder and running the steps,

firebase init
ng build --prod
firebase deploy again. it worked for me.

answered Feb 05 '21 at 04:56

aishwarya talapuru

57
2

score 1 · Answer 13 · answered Mar 22 '21 at 11:28

1

I was having the same issue with a React App.

Finally realised I hadn't run 'npm run build' therefore everything in the build folder had not been updated which is what Firebase was deploying.

answered Mar 22 '21 at 11:28

Jeremiah Flickinger

11
4

score 0 · Answer 14 · answered Aug 21 '19 at 00:45

0

Might be good to try reinstalling firebase-tools - after having problems similar to yours, I ran npm i -g firebase-tools and it seemed to fix it up.

answered Aug 21 '19 at 00:45

Stephen Hartfield

5
1

score 0 · Answer 15 · answered Jan 03 '22 at 12:14

I also have the same issue with HUGO website hosting on firebase app.and the issue solved successfully,can be your reference.

firstly need delete the public file locally, can then re build site use

HUGO -D

now public file rebuilt.

then deploy again.

Firebase deploy

I think why the firebase no updated is you only update the content, but it can not update the pubic file automatically, you need rebuild public file again.

score 0 · Answer 16 · answered Apr 08 '23 at 09:18

Might be late but It may help somebody

In your flutter project Delete web platform folder

open command prompt and run

flutter create . --platforms web this will create web folder again run

again build for web

flutter build web

to run web app locally you need to install lite-server run

npm install -g lite-server

after successful install from your project directory run

cd build/web && lite-server

It will run you web app locally on your machine So before deploying to the firebase hosting do some more changes in firebase.json and index.html file. for more help refer article

After that in your project directory do the changes in file firebase.json :

"hosting": {
"site" : "statepcs3",
"public": "build/web",
"ignore": [
  "firebase.json",
  "**/.*",
  "**/node_modules/**"
],
"headers": [

  {
    "source": "**",
    "headers": [
      {
        "key": "Cache-Control",
        "value": "no-cache"
      }
    ]
  }

]

}

Firebase deploy not updating JS file

16 Answers16

Linked