[#667][##1756] Add cache-busting to previewScripts.js

catarak · catarak · commit 7594f403b150 · 2021-03-11T17:57:00.000-05:00
diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx
@@ -35,6 +35,7 @@ import {
 } from '../actions/preferences';
 import { setBlobUrl } from '../actions/files';
 import { clearConsole, dispatchConsoleEvent } from '../actions/console';
+import getConfig from '../../../utils/getConfig';
 
 const shouldRenderSketch = (props, prevProps = undefined) => {
   const { isPlaying, previewIsRefreshing, fullView } = props;
@@ -168,7 +169,7 @@ class PreviewFrame extends React.Component {
     }
 
     const previewScripts = sketchDoc.createElement('script');
-    previewScripts.src = '/previewScripts.js';
+    previewScripts.src = getConfig('PREVIEW_SCRIPTS_URL');
     sketchDoc.head.appendChild(previewScripts);
 
     const sketchDocString = `<!DOCTYPE HTML>\n${sketchDoc.documentElement.outerHTML}`;
diff --git a/server/views/index.js b/server/views/index.js
@@ -34,7 +34,7 @@ export function renderIndex() {
         window.process.env.UPLOAD_LIMIT = ${process.env.UPLOAD_LIMIT ? `${process.env.UPLOAD_LIMIT}` : undefined};
         window.process.env.MOBILE_ENABLED = ${process.env.MOBILE_ENABLED ? `${process.env.MOBILE_ENABLED}` : undefined};
         window.process.env.TRANSLATIONS_ENABLED = ${process.env.TRANSLATIONS_ENABLED === 'true' ? true : false}; 
-
+        window.process.env.PREVIEW_SCRIPTS_URL = '${process.env.NODE_ENV === 'production' ? `${assetsManifest['/previewScripts.js']}` : '/previewScripts.js'}';
       </script>
     </head>
     <body>
diff --git a/webpack/config.prod.js b/webpack/config.prod.js
@@ -11,6 +11,8 @@ if (process.env.NODE_ENV === "development") {
   require('dotenv').config();
 }
 
+const sharedObj = {};
+
 module.exports = [{
   devtool: 'source-map',
   mode: 'production',
@@ -156,6 +158,8 @@ module.exports = [{
   plugins: [
     new WebpackManifestPlugin({
       basePath: '/',
+      filename: 'manifest.json',
+      seed: sharedObj
     }),
     new MiniCssExtractPlugin({
       filename: 'app.[hash].css',
@@ -170,7 +174,7 @@ module.exports = [{
 },
 {
   entry: {
-    app: [
+    previewScripts: [
       path.resolve(__dirname, '../client/utils/previewEntry.js')
     ]
   },
@@ -179,7 +183,7 @@ module.exports = [{
   mode: 'production',
   output: {
     path: path.resolve(__dirname, '../dist/static'),
-    filename: 'previewScripts.js',
+    filename: 'previewScripts.[hash].js',
     publicPath: '/'
   },
   resolve: {
@@ -208,4 +212,11 @@ module.exports = [{
       parallel: true
     })],
   },
+  plugins: [
+    new WebpackManifestPlugin({
+      basePath: '/',
+      filename: 'manifest.json',
+      seed: sharedObj
+    })
+  ]
 }];
