Firebase deploy not updating JS file

B

16

73

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

Behm answered 10/12, 2015 at 2:50 Comment(0)

M

138

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.

Monometallism answered 10/12, 2015 at 4:40 Comment(11)

Thanks! This worked. I'm a little embarrassed I didn't think of this myself... :) – Behm 12/12, 2015 at 19:3

@DavidEast, I have the same problem, where Firebase deploy is not updating JS file, I went to https://<my-app>.firebapp.com/app.js as suggested, to notice that it has not been updated to what I have locally. – Fast 16/3, 2016 at 1:5

Had a hiccup in hosting. It should be good now! Let me know if you're still having issues. – Monometallism 16/3, 2016 at 1:35

I will now use hard refresh bigly. Thank you. – Mendelian 12/6, 2017 at 15:47

@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! – Endometriosis 23/8, 2017 at 2:30

I have the same problem but clearing cash and hard cash empty didn't worked! – Maytime 18/12, 2017 at 6:4

THANK YOU, this drove me crazy – Sketchbook 7/6, 2018 at 3:0

@Behm 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... – Pissarro 21/2, 2019 at 12:26

same here 4 years later! But for some reason https://<my-app>.firebapp.com/app.js showed nothing!? Any idea which url could enable me to view my public folder on Firebase Hosting? – Titograd 12/11, 2019 at 14:44

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? – Laser 12/9, 2020 at 3:6

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. – Monometallism 15/9, 2020 at 15:41

B

64

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.

Bornie answered 27/11, 2016 at 13:45 Comment(3)

for me fas the same problem. used npm run-script build – Whoops 25/5, 2018 at 14:9

gets me every time this. Thanks – Chimb 3/2, 2022 at 16:29

Man, I was going insane. Thanks for the reminder. – Misconception 12/11, 2022 at 18:7

G

27

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

Gabbert answered 19/5, 2020 at 18:47 Comment(3)

Doesn't firebase deploy already run npm run build? – Pituitary 11/12, 2020 at 2:33

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. – Gabbert 16/12, 2020 at 10:13

Also in Angular (ng build) – Consideration 9/12, 2022 at 22:45

M

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.

Maytime answered 18/12, 2017 at 6:12 Comment(1)

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. – Brahmana 16/7, 2018 at 13:51

S

6

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.

Sauternes answered 4/3, 2020 at 12:6 Comment(0)

C

5

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.

Chicoine answered 25/8, 2021 at 17:37 Comment(0)

R

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

Reinhold answered 2/7, 2018 at 19:59 Comment(0)

I

2

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

Illyrian answered 30/11, 2016 at 0:47 Comment(0)

R

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.

Reams answered 3/8, 2020 at 9:34 Comment(0)

S

2

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.

Slipway answered 5/2, 2021 at 4:56 Comment(0)

A

1

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.

Automation answered 15/3, 2018 at 10:48 Comment(0)

C

1

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"
  }
}

Cereal answered 4/3, 2019 at 21:4 Comment(0)

U

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.

Urinate answered 21/8, 2019 at 0:45 Comment(0)

S

0

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.

Selfindulgent answered 22/3, 2021 at 11:28 Comment(0)

D

0

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.

Dietitian answered 3/1, 2022 at 12:14 Comment(0)

G

0

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"
      }
    ]
  }

]

}

Goetz answered 8/4, 2023 at 9:18 Comment(0)

Recommended topics

Hot tags