groundwork for asset caching

Author: dannycoates

.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

@@ -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",

package.json

@@ -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,

scripts/version.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(
-    webpackDevMiddleware(compiler, {
-      publicPath: config.output.publicPath
-    })
-  );
+  const wdm = webpackDevMiddleware(compiler, {
+    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,

server/server.js

@@ -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/download.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>