How to avoid caching on importmap.js in micro frontend (Single-spa) applications

Question

2 micro frontends and root application deployed in S3 bucket through AWS cloudfront distribution.

in my s3 bucket files have stored in following structure

• app1_281 (react micro frontend)
• app2_13 (react micro frontend)
• my-org-name-root-config.js
• my-org-name-root-congig.js.map
• importmap.json
• index.html

importmap.json

{
  "imports": {
    "single-spa": "https://cdn.jsdelivr.net/npm/[email protected]/lib/system/single-spa.min.js",
    "@my-org-name/root-config": "https://abcd.cloudfront.net/my-org-name-root-config.js",
    "react": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js",
    "react-dom": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js",
    "app1": "https://abcd.cloudfront.net/app1_281/app1.js",
    "app2": "https://abcd.cloudfront.net/app2_13/app2.js"
  }
}

I use jenkins for CI-CD and let's say if i build app1, then the new build number appends to the folder path of app1 as mentioned below in importmap.json.

"app1": "https://abcd.cloudfront.net/app1_282/app1.js",

The challenge arises when inspecting the importmap in the browser. it consistently displays the old version(281 instead of 282), and need a hard refresh to view the updated importmap.

Also this issue becomes problematic when routing from app1 to app2 using single-spa-router, resulting in a white screen.

Thanks

Answer 1

This isn't really a single-spa problem, but a browser caching problem that can be solved using the usual techniques. Pick one of your liking and implement it in your CI/CD. Personally, I deploy my micro-frontends in Kubernetes Nginx pods configured to include the Cache-Control header set to no-cache. By default, Nginx will calculate the ETags of all files, so this completes the solution.