Fly.io deploying with an earlier version of my .js file?

Hi everyone! I’m a very inexperienced webdev using fly.io and PocketBase to build a simple webpage where users can create a soccer lineup. I’ve been making modifications to my lineup.js file to get the functionality correct and redeploying to test the changes I make. That’s probably not the easiest way to do things, but it’s worked well so far.

Then this morning, I tried to make more changes to my Javascript file that provides all the functionality to the page, lineup.js, and it looks like the changes deployed successfully, but somehow it’s being deployed with an earlier version of the lineup.js file such that the recent changes aren’t being reflected.

For example, I put a console.log statement at the top of my file to keep track of what version I’m deploying. This screenshot shows v53.

And when I run ‘flyctl deploy’ from the command line, it seems to deploy properly. This screenshot from my app dashboard shows v53 successfully being deployed.

However, when I actually open the app and use Inspect to check how the code is running, I see that an older version of the Javascript file is being used.

So when I make changes to the Javascript file to fine tune the functionality, those changes don’t end up being reflected when the app is deployed. Does anyone know what might be causing this? It’s probably something really silly since I’m a total noob but I haven’t figured it out. I’ve copied my current folder structure at the Github link below. I’m deploying from the pb_data folder. Any help would be greatly appreciated. Thanks!

Hi! Would you mind sharing the output of the flyctl status and flyctl apps releases commands?

(The first, flyctl status, gives an overview of your app, including the running VMs, and should let you figure out if any of them are running an older version of your app. The second, flyctl apps releases, will give you a few more details about your app’s releases than the web interface will.)

Sure thing!

flyctl status:

flyctl apps releases:

I wonder if this is just browser caching? Here’s what I see using curl, which would not cache any static assets:

In terms of browser caching, the response headers for the JS file are:

This is using the last-modified date as the only caching mechanism, which only works for “conditional” checks (requests sent with “if-modified-since”) which I don’t think a browser will do automatically.

That being said, Chrome for me seems to be caching subsequent requests to that file. I suspect it is for you as well.

What I might suggest is, if possible, modifying the templates so the <script> tags load something like src="lineup.js?bust=1234" where the query string on that is something that updates anytime the file changes (or on each deployment), so each deployment uses a different URL for that .js file (thus busting the browser’s cache of that file).

2 Likes

Oh, and depending on what browser you’re using to develop with, there should be an option to disable the browser cache when testing that out (Chrome has a “disable cache” option for example):

1 Like

I think this might be it! Thanks so much! When I cleared the cache and used the disable cache option I was able to get it to use the correct version of my JS file. I appreciate the help!! :slight_smile:

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.