micro-frontendsingle-spaimport-mapssingle-spa-react

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

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

in my s3 bucket files have stored in following structure

importmap.json

{
  "imports": {
    "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/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/react@17.0.2/umd/react.production.min.js",
    "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@17.0.2/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

Solution

  • 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.