Automatic Cache Busting for Static Assets (NodeJS)

Feature Request
1

Problem
Browsers aggressively cache CSS and JS files. When developers update these assets, visitors often continue to see outdated versions until they manually refresh or clear their cache. This leads to inconsistent user experiences, broken layouts, and unnecessary frustration for both developers and end users.

Proposed Solution
Integrate a cache busting helper into Wappler’s server.js that automatically appends file modification timestamps to static asset URLs. For example:

// Cache busting helper – adds file modification timestamp to static asset URLs
const fs = require('fs');
const path = require('path');

app.locals.autoVersion = function (filePath) {
  try {
    const fullPath = path.join(process.cwd(), 'public', filePath);
    const stats = fs.statSync(fullPath);
    return filePath + '?v=' + stats.mtime.getTime();
  } catch (err) {
    // If file doesn't exist, return path with current timestamp
    return filePath + '?v=' + Date.now();
  }
};

This ensures that whenever a file is updated, the browser fetches the latest version without requiring manual intervention.

Benefits

  • Visitors always see the most up‑to‑date styles and scripts.
  • Eliminates the need for manual refreshes or cache clearing.
  • Improves workflow hygiene and reduces deployment issues.
  • Aligns Wappler with best practices in modern web development.

Implementation

  • <link rel="stylesheet" href="<%=autoVersion('/css/style.css')%>">
  • <script src="<%=autoVersion('/js/myscript.js')%>"></script>
  • <link rel="icon" type="image/png" href="<%=autoVersion('/assets/images/favicon.png')%>">

Community Value
This feature would streamline development workflows, reduce support overhead, and ensure Wappler projects deliver consistent, reliable user experiences.

4 Likes
2

With only 4 votes, I doubt that this request will be expedited. While we wait for Cache Busting to be included in Wappler's server.js, here is a workaround that will do the job.

wappler-cache-buster - npm

This helper module makes use of routes to register wappler-cache-buster to alleviate having the script included in server.js.

2 Likes
3

Hi Ben,

This is a very useful server extension. I just tried it by copying the files and it worked as intended. Many thanks for releasing it.

1 Like
4

This is indeed very useful. We will see if we can offer something similar in future updates. Or at least on option to auto enclose include tags with such function - so they are still recognized by Wappler as includes and not done again.

3 Likes