Add cache buster code

Author: flexdinesh

generate-build-version.js

@@ -0,0 +1,22 @@
+/* eslint-disable */
+const fs = require('fs');
+const packageJson = require('./package.json');
+
+const appVersion = packageJson.version;
+
+const jsonData = {
+  appVersion: appVersion
+};
+
+var jsonContent = JSON.stringify(jsonData);
+
+fs.writeFile('./public/version.json', jsonContent, 'utf8', function(err) {
+  if (err) {
+    console.log('An error occured while writing JSON Object to version.json');
+    return console.log(err);
+  }
+
+  console.log('version.json file has been saved with latest version number');
+});
+
+/* eslint-enable */

package.json

@@ -2,12 +2,21 @@
   "name": "cache-busting-example",
   "version": "0.1.0",
   "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:flexdinesh/cache-busting-example.git"
+  },
+  "license": "MIT",
+  "author": "Dineshkumar Pandiyan <flexdinesh@gmail.com>",
   "dependencies": {
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "2.1.8"
   },
   "scripts": {
+    "clean": "rm -rf build",
+    "prebuild": "npm run generate-build-version",
+    "generate-build-version": "node generate-build-version",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

public/meta.json

@@ -0,0 +1,3 @@
+{
+  "version": "0.0.1"
+}

src/App.css

@@ -9,14 +9,12 @@
 }
 
 .App-header {
-  background-color: #282c34;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
 }
 
 .App-link {

src/App.js

@@ -1,26 +1,20 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import CacheBuster from './CacheBuster';
 import './App.css';
 
 class App extends Component {
   render() {
     return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
-      </div>
+      <CacheBuster>
+        <div className="App">
+          <header className="App-header">
+            <h1>Cache Busting - Example</h1>
+            <p>
+              Bundle version - <code>v{global.appVersion}</code>.
+            </p>
+          </header>
+        </div>
+      </CacheBuster>
     );
   }
 }

src/CacheBuster.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { semverGreaterThan } from './helper';
+import packageJson from '../package.json';
+global.appVersion = packageJson.version;
+
+class CacheBuster extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isAppReady: false
+    };
+  }
+
+  componentDidMount() {
+    fetch('/meta.json')
+      .then((response) => response.json())
+      .then((meta) => {
+        console.log({ meta });
+        const latestVersion = meta.version;
+        const currentVersion = global.appVersion;
+
+        const shouldForceRefresh = semverGreaterThan(latestVersion, currentVersion);
+        if (shouldForceRefresh) {
+          console.log(`We have a new version - ${latestVersion}. Going to force refresh`);
+          window.location.reload(true);
+        } else {
+          console.log(`You already have the latest version - ${latestVersion}. No cache refresh needed.`);
+        }
+
+        this.setState({ isAppReady: true });
+      });
+  }
+  render() {
+    const { isAppReady } = this.state;
+    if (!isAppReady) return null;
+    return this.props.children;
+  }
+}
+
+export default CacheBuster;

src/helper.js

@@ -0,0 +1,16 @@
+// version from response - first param, local version second param
+export const semverGreaterThan = (versionA, versionB) => {
+  const versionsA = versionA.split(/\./g);
+
+  const versionsB = versionB.split(/\./g);
+  while (versionsA.length || versionsB.length) {
+    const a = Number(versionsA.shift());
+
+    const b = Number(versionsB.shift());
+    // eslint-disable-next-line no-continue
+    if (a === b) continue;
+    // eslint-disable-next-line no-restricted-globals
+    return a > b || isNaN(b);
+  }
+  return false;
+};

src/index.css

@@ -1,14 +1,12 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }

src/logo.svg

@@ -7925,7 +7925,7 @@ react-dev-utils@^8.0.0:
     strip-ansi "5.0.0"
     text-table "0.2.0"
 
-react-dom@16.8.6:
+react-dom@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
   integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
@@ -7999,7 +7999,7 @@ react-scripts@2.1.8:
   optionalDependencies:
     fsevents "1.2.4"
 
-react@16.8.6:
+react@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
   integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==