groundwork for asset caching

.dockerignore

@@ -6,3 +6,4 @@ test
 scripts
 docs
 firefox
+public

.gitignore

@@ -1,11 +1,6 @@
 .DS_Store
+dist
 node_modules
-public/upload.js
-public/download.js
-public/version.json
-public/l20n.min.js
-public/polyfill.min.js
 static/*
 !static/info.txt
 test/frontend/bundle.js
-public/main.css

docker-compose.yml

@@ -8,5 +8,6 @@ services:
       - "1443:1443"
     environment:
       - REDIS_HOST=redis
+      - NODE_ENV=production
   redis:
     image: redis:alpine

frontend/src/upload.js

@@ -32,7 +32,7 @@ async function upload(event) {
 
   storage.totalUploads += 1;
 
-  let file = '';
+  let file = null;
   if (clickOrDrop === 'drop') {
     if (!event.originalEvent.dataTransfer.files[0]) {
       uploadWindow.classList.remove('ondrag');

package-lock.json

@@ -5494,6 +5494,15 @@
         "is-buffer": "1.1.5"
       }
     },
+    "klaw": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/klaw/-/klaw-1.3.1.tgz",
+      "integrity": "sha1-QIhDO0azsbolnXh4XY6W9zugJDk=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "4.1.11"
+      }
+    },
     "known-css-properties": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.2.0.tgz",
@@ -10698,6 +10707,40 @@
         "time-stamp": "2.0.0"
       }
     },
+    "webpack-manifest-plugin": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/webpack-manifest-plugin/-/webpack-manifest-plugin-1.3.1.tgz",
+      "integrity": "sha512-OW7in/4VksQVnQcDJClv7YnOs/ruOqzPriT46z+qe6i1qINfZkmCNoxNG3r5J19VBSmO0KF1vn3Ute0yTKaeHQ==",
+      "dev": true,
+      "requires": {
+        "fs-extra": "0.30.0",
+        "lodash": "4.17.4"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "0.30.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.30.0.tgz",
+          "integrity": "sha1-8jP/zAjU2n1DLapEl3aYnbHfk/A=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "4.1.11",
+            "jsonfile": "2.4.0",
+            "klaw": "1.3.1",
+            "path-is-absolute": "1.0.1",
+            "rimraf": "2.6.1"
+          }
+        },
+        "jsonfile": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
+          "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "4.1.11"
+          }
+        }
+      }
+    },
     "webpack-sources": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.0.1.tgz",

package.json

@@ -51,7 +51,8 @@
     "testpilot-ga": "^0.3.0",
     "webcrypto-liner": "^0.1.25",
     "webpack": "^3.5.4",
-    "webpack-dev-middleware": "^1.12.0"
+    "webpack-dev-middleware": "^1.12.0",
+    "webpack-manifest-plugin": "^1.3.1"
   },
   "engines": {
     "node": ">=8.2.0"
@@ -99,13 +100,15 @@
   ],
   "scripts": {
     "precommit": "lint-staged",
+    "clean": "rm -rf dist/",
     "build": "npm-run-all build:*",
-    "build:css": "postcss frontend/src/*.css -d public",
+    "build:css": "postcss frontend/src/*.css -d dist",
     "build:js": "webpack -p",
-    "build:vendor": "cp node_modules/l20n/dist/web/l20n.min.js node_modules/babel-polyfill/dist/polyfill.min.js public",
+    "build:vendor": "cp node_modules/l20n/dist/web/l20n.min.js node_modules/babel-polyfill/dist/polyfill.min.js dist",
     "build:version": "node scripts/version",
+    "build:public": "cp -R public/ dist",
     "contributors": "git shortlog -s | awk -F\\t '{print $2}' > CONTRIBUTORS",
-    "dev": "npm run build && npm start",
+    "dev": "npm run clean && npm run build && npm start",
     "format": "prettier '{,frontend/src/,scripts/,server/,test/**/!(bundle)}*.{js,css}' --single-quote --write",
     "get-prod-locales": "node scripts/get-prod-locales",
     "get-prod-locales:write": "npm run get-prod-locales -- --write",

scripts/version.js

@@ -10,7 +10,7 @@ try {
   // Whatever...
 }
 
-const filename = path.join(__dirname, '..', 'public', 'version.json');
+const filename = path.join(__dirname, '..', 'dist', 'version.json');
 const filedata = {
   commit,
   source: pkg.homepage,

server/server.js

@@ -9,7 +9,8 @@ const storage = require('./storage.js');
 const Raven = require('raven');
 const crypto = require('crypto');
 const fs = require('fs');
-const version = require('../public/version.json');
+const version = require('../dist/version.json');
+const assets = require('../dist/manifest.json');
 
 if (conf.sentry_dsn) {
   Raven.config(conf.sentry_dsn).install();
@@ -19,7 +20,7 @@ const mozlog = require('./log.js');
 
 const log = mozlog('send.server');
 
-const STATIC_PATH = path.join(__dirname, '../public');
+const STATIC_PATH = path.join(__dirname, '../dist');
 
 const app = express();
 
@@ -36,6 +37,8 @@ function prodLangs() {
   return require('../package.json').availableLanguages.join(',');
 }
 
+let asset = name => assets[name];
+
 const availableLanguages = conf.l10n_dev ? allLangs() : prodLangs();
 
 if (conf.env === 'development') {
@@ -44,11 +47,16 @@ if (conf.env === 'development') {
   const config = require('../webpack.config.js');
   config.devtool = 'inline-source-map';
   const compiler = webpack(config);
-  app.use(
+  const wdm = webpackDevMiddleware(compiler, {
-    webpackDevMiddleware(compiler, {
+    publicPath: config.output.publicPath
-      publicPath: config.output.publicPath
+  });
-    })
+  app.use(wdm);
-  );
+  asset = name => {
+    const f = wdm.fileSystem.readFileSync(
+      wdm.getFilenameFromUrl('/manifest.json')
+    );
+    return JSON.parse(f)[name];
+  };
 }
 
 app.engine(
@@ -57,6 +65,7 @@ app.engine(
     defaultLayout: 'main',
     partialsDir: 'views/partials/',
     helpers: {
+      asset,
       availableLanguages,
       l10nDev: conf.l10n_dev,
       baseUrl: conf.base_url,

views/download.handlebars

@@ -1,5 +1,5 @@
 <div id="download">
-  <script defer src="/download.js"></script>
+  <script defer src="/{{asset 'download.js'}}"></script>
   <div id="download-page-one">
     <div class="title">
       <span id="dl-file"

views/index.handlebars

@@ -1,5 +1,5 @@
 <div id="page-one" hidden>
-  <script defer src="/upload.js"></script>
+  <script defer src="/{{asset 'upload.js' }}"></script>
   <div class="title" data-l10n-id="uploadPageHeader"></div>
   <div class="description">
     <div data-l10n-id="uploadPageExplainer"></div>

webpack.config.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const ManifestPlugin = require('webpack-manifest-plugin');
 
 module.exports = {
   entry: {
@@ -6,8 +7,8 @@ module.exports = {
     download: ['./frontend/src/download.js']
   },
   output: {
-    filename: '[name].js',
+    filename: '[name].[chunkhash].js',
-    path: path.resolve(__dirname, 'public'),
+    path: path.resolve(__dirname, 'dist'),
     publicPath: '/'
   },
   module: {
@@ -25,5 +26,6 @@ module.exports = {
         }
       }
     ]
-  }
+  },
+  plugins: [new ManifestPlugin()]
 };