Clear Cache(s) Command

Ideas
1

A few times, I’ve had to manually clear BSS’s cache (%AppData%\bstudio\Cache) because I changed an image that was external to the BSS project. Even selecting a different image and going back didn’t cause BSS to forget the original image.

I know about cache-busting, but would prefer a cleaner solution.

It would be convenient if BSS had a menu setting to clear its cache(s).

It might be possible to do this per external resource (image, script, etc), but that could be messy.

2

When you say you had an external image, do you mean loading the image via a URL from another site?

You also mentioned cache busting, I’m assuming you are using the preview feature of Bootstrap Studio.

Have you tried using CTRL+F5? This shortcut asks your browser to do a hard refresh and ditch anything it’s cached.

I personally haven’t experienced anything like the issue you are describing. Are you doing anything particularly novel with the images on the site that could be causing issues?

3

URL is to an image on the same site, but it is not included in the BSS project file. I upload it separately.

The stale image appears within BSS (ie, the editor); ie, not preview. I assume Ctrl+F5 doesn’t work within BSS itself, but I’ll confess that haven’t tried it.

4

I’m sorry, but I don’t understand. Can you explain in more detail?

6

I think we’re going off-topic. This has nothing to do with a browser (unless you call BSS’s ‘stage’ editor a browser).

cached
cached917×465 70 KB

If I make a change to the image and upload the change to the server using an ftp program, the BSS stage will not show the changes, even if I close and restart it. If I delete BSS’s cache folder manually, then it displays the new image.

I know I could get around this by changing the filename every time I edit the image, but I’d prefer for the filenames to be stable and clean.

I could also get around the issue by including all images as assets within the BSS project file, but that makes the project file much larger which doesn’t suit my workflow. Externally-hosted images are supported for this reason.

7

Apologies. I completely misunderstood your problem.

I do know the issue you’re talking about, when you have an external asset like an image or video hosted on a server, and it’s not reflected accurately in the Bootstrap Studio workspace. I’m not sure what the solution is.

I’ve seen this happen with background videos and images where suddenly it will just not appear in the workspace. It will show when previewing the website, but I find I often have to close and reopen the site, or even restart the program for it to appear again.

But as far as the image not changing when you update but keep the same file name, I’d wager its still some sort of server caching issue. I gave up trying to figure this out long ago and just relegated myself to the fact that I have to change the file names as I build my websites.

8

I’ve found that the solution to getting external assets to update in BSS is to delete BSS’s cache folder (location in my original post). I think this rules out foul play by the server (at least in my case).

While this workaround is fairly quick, it seems inelegant and rather hands-dirty. Since BSS is generally so deliciously smooth, I still feel that an in-app way to do this would be appropriate.

9

It depends on how your server and any caching layers are set up.

1. No caching / dynamic serving

  • If your server serves files directly from disk and doesn’t use a cache (like a CDN, reverse proxy, or browser cache), uploading a new file with the same name will immediately replace the old one.
  • No cache clearing is needed; anyone requesting the file gets the new version.

2. Browser caching

  • Browsers often cache files based on URL and Cache-Control headers.

  • If a user previously visited example.com/image.png, their browser may still show the old image even after you replace it.

  • Solution: You can either:

    • Change the filename (e.g., image_v2.png)
    • Or configure HTTP headers so browsers fetch a fresh copy (Cache-Control: no-cache or ETag).

3. Server-side caching / CDN

  • If your server uses a CDN (Cloudflare, AWS CloudFront, etc.) or reverse proxy caching:

    • The old file might still be stored in the cache.
    • You usually need to purge the cache for that file to make the new version visible.

4. Use versioned URLs

Instead of relying on the same filename, append a version query string:

<img src="image.png?v=1" alt="My Image">
  • When you update the image, change the query string:
<img src="image.png?v=2" alt="My Image">

  • Pros:

    • Browsers see it as a new URL → always fetch the new image.
    • Works even if a CDN is caching the old file.

  • Tip: Some frameworks auto-generate a hash of the file content so image.png?hash=abc123 updates automatically.

5. Set proper HTTP cache headers

Even if the URL stays the same, you can control caching:

  • Cache-Control header examples:
Cache-Control: no-cache, must-revalidate

“Always check with the server before using the cached version.”

Cache-Control: max-age=3600

“Cache for 1 hour, then check again.”

  • ETag header: a unique fingerprint of the file.
    • When the file changes, the ETag changes → browser/CDN fetches new file.

6. How to control caching for images

You need to set HTTP headers from the server that serve the image:

Example in Apache .htaccess

<FilesMatch "\.(jpg|jpeg|png|gif)$">
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires "0"
</FilesMatch>

Example in Nginx

location ~* \.(jpg|jpeg|png|gif)$ {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires 0;
}

7. Workaround if you can’t touch server headers

  • Use versioned URLs for the image, e.g.:
<img src="image.png?v=123" alt="Image">
  • Every time the file changes, update v= → browser treats it as a new file, completely bypassing cache.
  • This works even without server cache headers.

Summary “Best Practice”

  1. Never rely on overwriting image.png for instant updates.
  2. Use versioned URLs or content hashes.
  3. Configure Cache-Control and ETag headers.
  4. If a CDN is involved, purge or use versioning.

The Stage in Bootstrap Studio

The visible UI in an Electron app is always a browser window running HTML, CSS, and JavaScript, with Node.js as the backend.

3 Likes