Merge pull request #516 from mozilla/cache-assets

cache assets

.dockerignore

@@ -6,3 +6,7 @@ test
 scripts
 docs
 firefox
+public
+views
+webpack
+frontend

.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

circle.yml

@@ -16,7 +16,6 @@ deployment:
   latest:
     branch: master
     commands:
-    - npm run build
     - docker login -e $DOCKER_EMAIL -u $DOCKER_USER -p $DOCKER_PASS
     - docker build -t mozilla/send:latest .
     - docker push mozilla/send:latest
@@ -24,14 +23,13 @@ deployment:
     tag: /.*/
     owner: mozilla
     commands:
-    - npm run build
     - docker login -e $DOCKER_EMAIL -u $DOCKER_USER -p $DOCKER_PASS
     - docker build -t mozilla/send:$CIRCLE_TAG .
     - docker push mozilla/send:$CIRCLE_TAG
 
 test:
   override:
-    - npm run build:version
+    - npm run build
     - npm run lint
     - npm test
     - nsp check

docker-compose.yml

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

frontend/src/fileList.js

@@ -3,6 +3,8 @@ import Storage from './storage';
 import * as metrics from './metrics';
 import { allowedCopy, copyToClipboard, ONE_DAY_IN_MS } from './utils';
 import bel from 'bel';
+import copyImg from '../../public/resources/copy-16.svg';
+import closeImg from '../../public/resources/close-16.svg';
 
 const HOUR = 1000 * 60 * 60;
 const storage = new Storage();
@@ -58,13 +60,13 @@ function addFile(file) {
     <td>${file.name}</td>
     <td>
       <span class="icon-docs" data-l10n-id="copyUrlHover"></span>
-      <img onclick=${copyClick} src="/resources/copy-16.svg" class="icon-copy" data-l10n-id="copyUrlHover">
+      <img onclick=${copyClick} src="${copyImg}" class="icon-copy" data-l10n-id="copyUrlHover">
       <span data-l10n-id="copiedUrl" class="text-copied" hidden="true"></span>
     </td>
     <td>${timeLeft(countdown)}</td>
     <td>
       <span class="icon-cancel-1" data-l10n-id="deleteButtonHover" title="Delete"></span>
-      <img onclick=${showPopup} src="/resources/close-16.svg" class="icon-delete" data-l10n-id="deleteButtonHover" title="Delete">
+      <img onclick=${showPopup} src="${closeImg}" class="icon-delete" data-l10n-id="deleteButtonHover" title="Delete">
       <div class="popup">
         <div class="popuptext" onclick=${stopProp} onblur=${cancel} tabindex="-1">
           <div class="popup-message" data-l10n-id="deletePopupText"></div>

frontend/src/main.css

@@ -1,6 +1,6 @@
 /***     index.html     ***/
 html {
-  background: url('resources/send_bg.svg');
+  background: url('../../public/resources/send_bg.svg');
   font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'segoe ui',
     'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif;
   font-weight: 200;
@@ -89,7 +89,7 @@ body {
 
 .feedback {
   background-color: #0297f8;
-  background-image: url('resources/feedback.svg');
+  background-image: url('../../public/resources/feedback.svg');
   background-position: 2px 4px;
   background-repeat: no-repeat;
   background-size: 18px;

package-lock.json

@@ -250,6 +250,12 @@
         "util": "0.10.3"
       }
     },
+    "ast-types": {
+      "version": "0.9.6",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.9.6.tgz",
+      "integrity": "sha1-ECyenpAF0+fjgpvwxPok7oYu6bk=",
+      "dev": true
+    },
     "astw": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/astw/-/astw-2.2.0.tgz",
@@ -1109,6 +1115,12 @@
       "integrity": "sha1-ZlBsFs5vTWkopbPNajPKQelB43s=",
       "dev": true
     },
+    "bluebird": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.0.tgz",
+      "integrity": "sha1-eRQg1/VR7qKJdFOop3ZT+WYG1nw=",
+      "dev": true
+    },
     "bn.js": {
       "version": "4.11.8",
       "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz",
@@ -1132,6 +1144,12 @@
         "type-is": "1.6.15"
       }
     },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
+      "dev": true
+    },
     "brace-expansion": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz",
@@ -1469,6 +1487,16 @@
       "integrity": "sha1-r6uWJikQp/M8GaV3WCXGnzTjUMo=",
       "dev": true
     },
+    "camel-case": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz",
+      "integrity": "sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=",
+      "dev": true,
+      "requires": {
+        "no-case": "2.3.1",
+        "upper-case": "1.1.3"
+      }
+    },
     "camelcase": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
@@ -1608,6 +1636,23 @@
         "chalk": "1.1.3"
       }
     },
+    "clean-css": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.7.tgz",
+      "integrity": "sha1-ua6k+FZ5iJzz6ui0A0nsTr390DI=",
+      "dev": true,
+      "requires": {
+        "source-map": "0.5.6"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.5.6",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+          "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=",
+          "dev": true
+        }
+      }
+    },
     "cli-cursor": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
@@ -2026,6 +2071,79 @@
       "integrity": "sha1-Qa1XsbVVlR7BcUEqgZQrHoIA00o=",
       "dev": true
     },
+    "copy-webpack-plugin": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-4.0.1.tgz",
+      "integrity": "sha1-lyjjg7lDFgUNDHRjlY8rhcCqggA=",
+      "dev": true,
+      "requires": {
+        "bluebird": "2.11.0",
+        "fs-extra": "0.26.7",
+        "glob": "6.0.4",
+        "is-glob": "3.1.0",
+        "loader-utils": "0.2.17",
+        "lodash": "4.17.4",
+        "minimatch": "3.0.4",
+        "node-dir": "0.1.17"
+      },
+      "dependencies": {
+        "bluebird": {
+          "version": "2.11.0",
+          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-2.11.0.tgz",
+          "integrity": "sha1-U0uQM8AiyVecVro7Plpcqvu2UOE=",
+          "dev": true
+        },
+        "fs-extra": {
+          "version": "0.26.7",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.26.7.tgz",
+          "integrity": "sha1-muH92UiXeY7at20JGM9C0MMYT6k=",
+          "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"
+          }
+        },
+        "is-extglob": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+          "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+          "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+          "dev": true,
+          "requires": {
+            "is-extglob": "2.1.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"
+          }
+        },
+        "loader-utils": {
+          "version": "0.2.17",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
+          "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
+          "dev": true,
+          "requires": {
+            "big.js": "3.1.3",
+            "emojis-list": "2.1.0",
+            "json5": "0.5.1",
+            "object-assign": "4.1.1"
+          }
+        }
+      }
+    },
     "core-js": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.0.tgz",
@@ -2128,6 +2246,69 @@
       "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
       "dev": true
     },
+    "css-loader": {
+      "version": "0.28.4",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-0.28.4.tgz",
+      "integrity": "sha1-bPNXkZLONV6LONX0Ldeh8uyJjQ8=",
+      "dev": true,
+      "requires": {
+        "babel-code-frame": "6.22.0",
+        "css-selector-tokenizer": "0.7.0",
+        "cssnano": "3.10.0",
+        "icss-utils": "2.1.0",
+        "loader-utils": "1.1.0",
+        "lodash.camelcase": "4.3.0",
+        "object-assign": "4.1.1",
+        "postcss": "5.2.17",
+        "postcss-modules-extract-imports": "1.1.0",
+        "postcss-modules-local-by-default": "1.2.0",
+        "postcss-modules-scope": "1.1.0",
+        "postcss-modules-values": "1.3.0",
+        "postcss-value-parser": "3.3.0",
+        "source-list-map": "0.1.8"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
+          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "5.2.17",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.17.tgz",
+          "integrity": "sha1-z09Ze4ZNZcikkrLqvp1wbIecOIs=",
+          "dev": true,
+          "requires": {
+            "chalk": "1.1.3",
+            "js-base64": "2.1.9",
+            "source-map": "0.5.6",
+            "supports-color": "3.2.3"
+          }
+        },
+        "source-list-map": {
+          "version": "0.1.8",
+          "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-0.1.8.tgz",
+          "integrity": "sha1-xVCyq1Qn9rPyH1r+rYjE9Vh7IQY=",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.5.6",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+          "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "3.2.3",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
+          "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
+          "dev": true,
+          "requires": {
+            "has-flag": "1.0.0"
+          }
+        }
+      }
+    },
     "css-mqpacker": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/css-mqpacker/-/css-mqpacker-6.0.1.tgz",
@@ -2199,6 +2380,42 @@
         }
       }
     },
+    "css-select": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
+      "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
+      "dev": true,
+      "requires": {
+        "boolbase": "1.0.0",
+        "css-what": "2.1.0",
+        "domutils": "1.5.1",
+        "nth-check": "1.0.1"
+      }
+    },
+    "css-selector-tokenizer": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz",
+      "integrity": "sha1-5piEdK6MlTR3v15+/s/OzNnPTIY=",
+      "dev": true,
+      "requires": {
+        "cssesc": "0.1.0",
+        "fastparse": "1.1.1",
+        "regexpu-core": "1.0.0"
+      },
+      "dependencies": {
+        "regexpu-core": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz",
+          "integrity": "sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=",
+          "dev": true,
+          "requires": {
+            "regenerate": "1.3.2",
+            "regjsgen": "0.2.0",
+            "regjsparser": "0.1.5"
+          }
+        }
+      }
+    },
     "css-tokenize": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/css-tokenize/-/css-tokenize-1.0.1.tgz",
@@ -2209,6 +2426,18 @@
         "readable-stream": "1.1.14"
       }
     },
+    "css-what": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.0.tgz",
+      "integrity": "sha1-lGfQMsOM+u+58teVASUwYvh/ob0=",
+      "dev": true
+    },
+    "cssesc": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
+      "integrity": "sha1-yBSQPkViM3GgR3tAEJqq++6t27Q=",
+      "dev": true
+    },
     "cssnano": {
       "version": "3.10.0",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-3.10.0.tgz",
@@ -2651,12 +2880,72 @@
         }
       }
     },
+    "dom-converter": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.1.4.tgz",
+      "integrity": "sha1-pF71cnuJDJv/5tfIduexnLDhfzs=",
+      "dev": true,
+      "requires": {
+        "utila": "0.3.3"
+      },
+      "dependencies": {
+        "utila": {
+          "version": "0.3.3",
+          "resolved": "https://registry.npmjs.org/utila/-/utila-0.3.3.tgz",
+          "integrity": "sha1-1+jn1+MJEHCSsF+NloiCTWM6QiY=",
+          "dev": true
+        }
+      }
+    },
+    "dom-serializer": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
+      "integrity": "sha1-BzxpdUbOB4DOI75KKOKT5AvDDII=",
+      "dev": true,
+      "requires": {
+        "domelementtype": "1.1.3",
+        "entities": "1.1.1"
+      },
+      "dependencies": {
+        "domelementtype": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
+          "integrity": "sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs=",
+          "dev": true
+        }
+      }
+    },
     "domain-browser": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.1.7.tgz",
       "integrity": "sha1-hnqksJP6oF8d4IwG9NeyH9+GmLw=",
       "dev": true
     },
+    "domelementtype": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz",
+      "integrity": "sha1-sXrtguirWeUt2cGbF1bg/BhyBMI=",
+      "dev": true
+    },
+    "domhandler": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.1.0.tgz",
+      "integrity": "sha1-0mRvXlf2w7qxHPbLBdPArPdBJZQ=",
+      "dev": true,
+      "requires": {
+        "domelementtype": "1.3.0"
+      }
+    },
+    "domutils": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
+      "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
+      "dev": true,
+      "requires": {
+        "dom-serializer": "0.1.0",
+        "domelementtype": "1.3.0"
+      }
+    },
     "dont-sniff-mimetype": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dont-sniff-mimetype/-/dont-sniff-mimetype-1.0.0.tgz",
@@ -2763,6 +3052,12 @@
         "tapable": "0.2.8"
       }
     },
+    "entities": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.1.tgz",
+      "integrity": "sha1-blwtClYhtdra7O+AuQ7ftc13cvA=",
+      "dev": true
+    },
     "errno": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.4.tgz",
@@ -2869,6 +3164,16 @@
         "es5-ext": "0.10.27"
       }
     },
+    "es6-templates": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/es6-templates/-/es6-templates-0.2.3.tgz",
+      "integrity": "sha1-XLmsn7He1usSOTQrgdeSu7QHjuQ=",
+      "dev": true,
+      "requires": {
+        "recast": "0.11.23",
+        "through": "2.3.8"
+      }
+    },
     "es6-weak-map": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-2.0.2.tgz",
@@ -3328,6 +3633,15 @@
         "is-extglob": "1.0.0"
       }
     },
+    "extract-loader": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/extract-loader/-/extract-loader-1.0.0.tgz",
+      "integrity": "sha512-NEWbK3OHP2csbg35pXPbnRP8rmSxSSisROK+SN2m+UloWL5COgtj+/YuX4o6KSK3PLYFNdF6j3BxyboCbSvSMg==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "1.1.0"
+      }
+    },
     "fast-deep-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz",
@@ -3340,6 +3654,12 @@
       "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
       "dev": true
     },
+    "fastparse": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.1.tgz",
+      "integrity": "sha1-0eJkOzipTXWDtHkGDmxK/8lAcfg=",
+      "dev": true
+    },
     "figures": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
@@ -3359,6 +3679,15 @@
         "object-assign": "4.1.1"
       }
     },
+    "file-loader": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-0.11.2.tgz",
+      "integrity": "sha512-N+uhF3mswIFeziHQjGScJ/yHXYt3DiLBeC+9vWW+WjUBiClMSOlV1YrXQi+7KM2aA3Rn4Bybgv+uXFQbfkzpvg==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "1.1.0"
+      }
+    },
     "filename-regex": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
@@ -4637,6 +4966,12 @@
         "minimalistic-assert": "1.0.0"
       }
     },
+    "he": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
+      "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=",
+      "dev": true
+    },
     "helmet": {
       "version": "3.8.1",
       "resolved": "https://registry.npmjs.org/helmet/-/helmet-3.8.1.tgz",
@@ -4717,18 +5052,140 @@
       "integrity": "sha1-ZouTd26q5V696POtRkswekljYl4=",
       "dev": true
     },
+    "html-loader": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/html-loader/-/html-loader-0.5.1.tgz",
+      "integrity": "sha512-RxokXoxcsRSWcN553Ew+K0TUo68gQfmddTuUIZ4xRD8Ax1xXzX2UYQ3FC3D5MoRPGAdL1erWKeEFihDrrdxHiA==",
+      "dev": true,
+      "requires": {
+        "es6-templates": "0.2.3",
+        "fastparse": "1.1.1",
+        "html-minifier": "3.5.3",
+        "loader-utils": "1.1.0",
+        "object-assign": "4.1.1"
+      }
+    },
+    "html-minifier": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.3.tgz",
+      "integrity": "sha512-iKRzQQDuTCsq0Ultbi/mfJJnR0D3AdZKTq966Gsp92xkmAPCV4Xi08qhJ0Dl3ZAWemSgJ7qZK+UsZc0gFqK6wg==",
+      "dev": true,
+      "requires": {
+        "camel-case": "3.0.0",
+        "clean-css": "4.1.7",
+        "commander": "2.11.0",
+        "he": "1.1.1",
+        "ncname": "1.0.0",
+        "param-case": "2.1.1",
+        "relateurl": "0.2.7",
+        "uglify-js": "3.0.27"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.11.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.11.0.tgz",
+          "integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.5.6",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+          "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=",
+          "dev": true
+        },
+        "uglify-js": {
+          "version": "3.0.27",
+          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.0.27.tgz",
+          "integrity": "sha512-HD8CmxPXUI62v5tweiulMcP/apAtx1DXGcNZkhKQZyC+MTrTsoCBb8yPAwVrbvpgw3EpRU76bRe6axjIiCYcQg==",
+          "dev": true,
+          "requires": {
+            "commander": "2.11.0",
+            "source-map": "0.5.6"
+          }
+        }
+      }
+    },
     "html-tags": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz",
       "integrity": "sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=",
       "dev": true
     },
+    "html-webpack-plugin": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-2.30.1.tgz",
+      "integrity": "sha1-f5xCG36pHsRg9WUn1430hO51N9U=",
+      "dev": true,
+      "requires": {
+        "bluebird": "3.5.0",
+        "html-minifier": "3.5.3",
+        "loader-utils": "0.2.17",
+        "lodash": "4.17.4",
+        "pretty-error": "2.1.1",
+        "toposort": "1.0.3"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "0.2.17",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
+          "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
+          "dev": true,
+          "requires": {
+            "big.js": "3.1.3",
+            "emojis-list": "2.1.0",
+            "json5": "0.5.1",
+            "object-assign": "4.1.1"
+          }
+        }
+      }
+    },
     "htmlescape": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/htmlescape/-/htmlescape-1.1.1.tgz",
       "integrity": "sha1-OgPtwiFLyjtmQko+eVk0lQnLA1E=",
       "dev": true
     },
+    "htmlparser2": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.3.0.tgz",
+      "integrity": "sha1-zHDQWln2VC5D8OaFyYLhTJJKnv4=",
+      "dev": true,
+      "requires": {
+        "domelementtype": "1.3.0",
+        "domhandler": "2.1.0",
+        "domutils": "1.1.6",
+        "readable-stream": "1.0.34"
+      },
+      "dependencies": {
+        "domutils": {
+          "version": "1.1.6",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.1.6.tgz",
+          "integrity": "sha1-vdw94Jm5ou+sxRxiPyj0FuzFdIU=",
+          "dev": true,
+          "requires": {
+            "domelementtype": "1.3.0"
+          }
+        },
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+          "dev": true,
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "0.0.1",
+            "string_decoder": "0.10.31"
+          }
+        }
+      }
+    },
     "http-errors": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.2.tgz",
@@ -4791,6 +5248,21 @@
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.15.tgz",
       "integrity": "sha1-/iZaIYrGpXz+hUkn6dBMGYJe3es="
     },
+    "icss-replace-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
+      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=",
+      "dev": true
+    },
+    "icss-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-2.1.0.tgz",
+      "integrity": "sha1-g/Cg7DeL8yRheLbCrZE28TWxyWI=",
+      "dev": true,
+      "requires": {
+        "postcss": "6.0.8"
+      }
+    },
     "ieee754": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.8.tgz",
@@ -5494,6 +5966,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",
@@ -5914,6 +6395,12 @@
       "integrity": "sha1-UgOte6Ql+uhCRg5pbbnPPmqsBXw=",
       "dev": true
     },
+    "lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
+      "dev": true
+    },
     "lodash.chunk": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.chunk/-/lodash.chunk-4.2.0.tgz",
@@ -6053,6 +6540,12 @@
         "signal-exit": "3.0.2"
       }
     },
+    "lower-case": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
+      "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=",
+      "dev": true
+    },
     "lru-cache": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz",
@@ -6533,16 +7026,43 @@
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
+    "ncname": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/ncname/-/ncname-1.0.0.tgz",
+      "integrity": "sha1-W1etGLHKCShk72Kwse2BlPODtxw=",
+      "dev": true,
+      "requires": {
+        "xml-char-classes": "1.0.0"
+      }
+    },
     "negotiator": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
       "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk="
     },
+    "no-case": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.1.tgz",
+      "integrity": "sha1-euuhxzpSGEJlVUt9wDuvcg34AIE=",
+      "dev": true,
+      "requires": {
+        "lower-case": "1.1.4"
+      }
+    },
     "nocache": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/nocache/-/nocache-2.0.0.tgz",
       "integrity": "sha1-ICtIAhoMTL3i34DeFaF0Q8i0OYA="
     },
+    "node-dir": {
+      "version": "0.1.17",
+      "resolved": "https://registry.npmjs.org/node-dir/-/node-dir-0.1.17.tgz",
+      "integrity": "sha1-X1Zl2TNRM1yqvvjxxVRRbPXx5OU=",
+      "dev": true,
+      "requires": {
+        "minimatch": "3.0.4"
+      }
+    },
     "node-libs-browser": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.0.0.tgz",
@@ -6740,6 +7260,15 @@
         "which": "1.3.0"
       }
     },
+    "nth-check": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.1.tgz",
+      "integrity": "sha1-mSms32KPwsQQmN6rgqxYDPFJquQ=",
+      "dev": true,
+      "requires": {
+        "boolbase": "1.0.0"
+      }
+    },
     "num2fraction": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
@@ -6913,6 +7442,15 @@
       "integrity": "sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU=",
       "dev": true
     },
+    "param-case": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz",
+      "integrity": "sha1-35T9jPZTHs915r75oIWPvHK+Ikc=",
+      "dev": true,
+      "requires": {
+        "no-case": "2.3.1"
+      }
+    },
     "parents": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parents/-/parents-1.0.1.tgz",
@@ -7721,6 +8259,18 @@
         "object-assign": "4.1.1"
       }
     },
+    "postcss-loader": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-2.0.6.tgz",
+      "integrity": "sha512-HIq7yy1hh9KI472Y38iSRV4WupZUNy6zObkxQM/ZuInoaE2+PyX4NcO6jjP5HG5mXL7j5kcNEl0fAG4Kva7O9w==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "1.1.0",
+        "postcss": "6.0.8",
+        "postcss-load-config": "1.2.0",
+        "schema-utils": "0.3.0"
+      }
+    },
     "postcss-media-query-parser": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
@@ -8066,6 +8616,45 @@
         }
       }
     },
+    "postcss-modules-extract-imports": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz",
+      "integrity": "sha1-thTJcgvmgW6u41+zpfqh26agXds=",
+      "dev": true,
+      "requires": {
+        "postcss": "6.0.8"
+      }
+    },
+    "postcss-modules-local-by-default": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz",
+      "integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=",
+      "dev": true,
+      "requires": {
+        "css-selector-tokenizer": "0.7.0",
+        "postcss": "6.0.8"
+      }
+    },
+    "postcss-modules-scope": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz",
+      "integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=",
+      "dev": true,
+      "requires": {
+        "css-selector-tokenizer": "0.7.0",
+        "postcss": "6.0.8"
+      }
+    },
+    "postcss-modules-values": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz",
+      "integrity": "sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=",
+      "dev": true,
+      "requires": {
+        "icss-replace-symbols": "1.1.0",
+        "postcss": "6.0.8"
+      }
+    },
     "postcss-normalize-charset": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz",
@@ -8543,6 +9132,16 @@
       "integrity": "sha1-WdrcaDNF7GuI+IuU7Urn4do5S/4=",
       "dev": true
     },
+    "pretty-error": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.1.tgz",
+      "integrity": "sha1-X0+HyPkeWuPzuoerTPXgOxoX8aM=",
+      "dev": true,
+      "requires": {
+        "renderkid": "2.0.1",
+        "utila": "0.4.0"
+      }
+    },
     "private": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.7.tgz",
@@ -8897,6 +9496,32 @@
         }
       }
     },
+    "recast": {
+      "version": "0.11.23",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.11.23.tgz",
+      "integrity": "sha1-RR/TAEqx5N+bTktmN2sqIZEkYtM=",
+      "dev": true,
+      "requires": {
+        "ast-types": "0.9.6",
+        "esprima": "3.1.3",
+        "private": "0.1.7",
+        "source-map": "0.5.6"
+      },
+      "dependencies": {
+        "esprima": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
+          "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.5.6",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+          "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=",
+          "dev": true
+        }
+      }
+    },
     "rechoir": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
@@ -9044,12 +9669,39 @@
         }
       }
     },
+    "relateurl": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+      "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
+      "dev": true
+    },
     "remove-trailing-separator": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.0.2.tgz",
       "integrity": "sha1-abBi2XhyetFNxrVrpKt3L9jXBRE=",
       "dev": true
     },
+    "renderkid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.1.tgz",
+      "integrity": "sha1-iYyr/Ivt5Le5ETWj/9Mj5YwNsxk=",
+      "dev": true,
+      "requires": {
+        "css-select": "1.2.0",
+        "dom-converter": "0.1.4",
+        "htmlparser2": "3.3.0",
+        "strip-ansi": "3.0.1",
+        "utila": "0.3.3"
+      },
+      "dependencies": {
+        "utila": {
+          "version": "0.3.3",
+          "resolved": "https://registry.npmjs.org/utila/-/utila-0.3.3.tgz",
+          "integrity": "sha1-1+jn1+MJEHCSsF+NloiCTWM6QiY=",
+          "dev": true
+        }
+      }
+    },
     "repeat-element": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.2.tgz",
@@ -9231,6 +9883,15 @@
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz",
       "integrity": "sha1-e45lYZCyKOgaZq6nSEgNgozS03o="
     },
+    "schema-utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.3.0.tgz",
+      "integrity": "sha1-9YdyIs4+kx7a4DnxfrNxbnE3+M8=",
+      "dev": true,
+      "requires": {
+        "ajv": "5.2.2"
+      }
+    },
     "selenium-webdriver": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-3.5.0.tgz",
@@ -10281,6 +10942,12 @@
       "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=",
       "dev": true
     },
+    "toposort": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.3.tgz",
+      "integrity": "sha1-8CzYp0vYvi/A6YYRw7rLlaFxhpw=",
+      "dev": true
+    },
     "trim-newlines": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
@@ -10427,6 +11094,12 @@
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
       "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
     },
+    "upper-case": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz",
+      "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=",
+      "dev": true
+    },
     "url": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/url/-/url-0.10.3.tgz",
@@ -10464,6 +11137,12 @@
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
       "dev": true
     },
+    "utila": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
+      "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=",
+      "dev": true
+    },
     "utils-merge": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.0.tgz",
@@ -10798,6 +11477,12 @@
       "resolved": "https://registry.npmjs.org/x-xss-protection/-/x-xss-protection-1.0.0.tgz",
       "integrity": "sha1-iYr7k4abJGYc+cUvnujbjtB2Tdk="
     },
+    "xml-char-classes": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/xml-char-classes/-/xml-char-classes-1.0.0.tgz",
+      "integrity": "sha1-ZGV4SKIP/F31g6Qq2KJ3tFErvE0=",
+      "dev": true
+    },
     "xml2js": {
       "version": "0.4.17",
       "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.17.tgz",

package.json

@@ -25,23 +25,32 @@
     "babel-preset-stage-2": "^6.24.1",
     "bel": "^5.0.3",
     "browserify": "^14.4.0",
+    "copy-webpack-plugin": "^4.0.1",
     "cross-env": "^5.0.5",
+    "css-loader": "^0.28.4",
     "css-mqpacker": "^6.0.1",
     "cssnano": "^3.10.0",
     "eslint": "^4.3.0",
     "eslint-plugin-mocha": "^4.11.0",
     "eslint-plugin-node": "^5.1.1",
     "eslint-plugin-security": "^1.4.0",
+    "extract-loader": "^1.0.0",
+    "file-loader": "^0.11.2",
     "git-rev-sync": "^1.9.1",
+    "html-loader": "^0.5.1",
+    "html-webpack-plugin": "^2.30.1",
     "husky": "^0.14.3",
     "l20n": "^5.0.0",
     "lint-staged": "^4.0.3",
+    "mkdirp": "^0.5.1",
     "mocha": "^3.4.2",
     "npm-run-all": "^4.0.2",
     "postcss-cli": "^4.1.0",
+    "postcss-loader": "^2.0.6",
     "prettier": "^1.5.3",
     "proxyquire": "^1.8.0",
     "raven-js": "^3.17.0",
+    "rimraf": "^2.6.1",
     "selenium-webdriver": "^3.5.0",
     "sinon": "^2.3.8",
     "stylelint": "^8.0.0",
@@ -99,13 +108,12 @@
   ],
   "scripts": {
     "precommit": "lint-staged",
+    "clean": "rimraf dist",
     "build": "npm-run-all build:*",
-    "build:css": "postcss frontend/src/*.css -d public",
     "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:version": "node scripts/version",
     "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

@@ -1,6 +1,7 @@
 const fs = require('fs');
 const path = require('path');
 const pkg = require('../package.json');
+const mkdirp = require('mkdirp');
 
 let commit;
 
@@ -10,11 +11,11 @@ try {
   // Whatever...
 }
 
-const filename = path.join(__dirname, '..', 'public', 'version.json');
+const filename = path.join(__dirname, '..', 'dist', 'public', 'version.json');
 const filedata = {
   commit,
   source: pkg.homepage,
   version: process.env.CIRCLE_TAG || `v${pkg.version}`
 };
-
+mkdirp.sync(path.dirname(filename));
 fs.writeFileSync(filename, JSON.stringify(filedata, null, 2) + '\n');

server/server.js

@@ -9,7 +9,7 @@ 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/public/version.json');
 
 if (conf.sentry_dsn) {
   Raven.config(conf.sentry_dsn).install();
@@ -19,7 +19,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/public');
 
 const app = express();
 
@@ -38,27 +38,28 @@ function prodLangs() {
 
 const availableLanguages = conf.l10n_dev ? allLangs() : prodLangs();
 
-if (conf.env === 'development') {
+// dev middleware is broken at the moment because of how webpack builds the
-  const webpack = require('webpack');
+// handlebars templates. Leaving the commented code here as a mark of shame.
-  const webpackDevMiddleware = require('webpack-dev-middleware');
-  const config = require('../webpack.config.js');
-  config.devtool = 'inline-source-map';
-  const compiler = webpack(config);
-  app.use(
-    webpackDevMiddleware(compiler, {
-      publicPath: config.output.publicPath
-    })
-  );
-}
 
+// if (conf.env === 'development') {
+//   const webpack = require('webpack');
+//   const webpackDevMiddleware = require('webpack-dev-middleware');
+//   const config = require('../webpack.config.js');
+//   config.devtool = 'inline-source-map';
+//   const compiler = webpack(config);
+//   const wdm = webpackDevMiddleware(compiler, {
+//     publicPath: config.output.publicPath
+//   });
+//   app.use(wdm);
+// }
+app.set('views', 'dist/views/');
 app.engine(
   'handlebars',
   exphbs({
     defaultLayout: 'main',
-    partialsDir: 'views/partials/',
+    layoutsDir: 'dist/views/layouts',
     helpers: {
       availableLanguages,
-      l10nDev: conf.l10n_dev,
       baseUrl: conf.base_url,
       title: 'Firefox Send',
       description:
@@ -103,6 +104,14 @@ app.use(
   })
 );
 app.use(bodyParser.json());
+app.use(
+  '/resources',
+  express.static(path.join(STATIC_PATH, 'resources'), {
+    setHeaders: function(res) {
+      res.set('Cache-Control', 'public, max-age=31536000, immutable');
+    }
+  })
+);
 app.use(express.static(STATIC_PATH));
 
 app.get('/', (req, res) => {

webpack.config.js

@@ -1,13 +1,17 @@
 const path = require('path');
+const webpack = require('webpack');
+const HtmlPlugin = require('html-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 
 module.exports = {
   entry: {
+    vendor: ['babel-polyfill', 'raven-js'],
     upload: ['./frontend/src/upload.js'],
     download: ['./frontend/src/download.js']
   },
   output: {
-    filename: '[name].js',
+    filename: 'resources/[name].[chunkhash].js',
-    path: path.resolve(__dirname, 'public'),
+    path: path.resolve(__dirname, 'dist/public'),
     publicPath: '/'
   },
   module: {
@@ -23,7 +27,98 @@ module.exports = {
           babelrc: false,
           presets: [['es2015', { modules: false }], 'stage-2']
         }
+      },
+      {
+        test: /\.(svg|png|jpg)$/,
+        loader: 'file-loader',
+        options: {
+          name: 'resources/[name].[hash].[ext]'
+        }
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: 'resources/[name].[hash].[ext]'
+            }
+          },
+          'extract-loader',
+          { loader: 'css-loader', options: { importLoaders: 1 } },
+          'postcss-loader'
+        ]
+      },
+      {
+        test: /\.hbs$/,
+        use: [
+          {
+            loader: 'html-loader',
+            options: {
+              interpolate: 'require',
+              minimize: false
+            }
+          }
+        ]
       }
     ]
-  }
+  },
+  plugins: [
+    new CopyPlugin([
+      {
+        context: 'public',
+        from: 'locales/**/*.ftl'
+      },
+      {
+        context: 'public',
+        from: '*.*'
+      },
+      {
+        from: 'views/**',
+        to: '../'
+      },
+      {
+        context: 'node_modules/l20n/dist/web',
+        from: 'l20n.min.js'
+      }
+    ]),
+    new HtmlPlugin({
+      filename: '../views/index.handlebars',
+      template: 'webpack/upload.hbs',
+      chunks: ['upload']
+    }),
+    new HtmlPlugin({
+      filename: '../views/download.handlebars',
+      template: 'webpack/download.hbs',
+      chunks: ['download']
+    }),
+    new HtmlPlugin({
+      filename: '../views/legal.handlebars',
+      template: 'webpack/legal.hbs',
+      inject: false
+    }),
+    new HtmlPlugin({
+      filename: '../views/notfound.handlebars',
+      template: 'webpack/notfound.hbs',
+      inject: false
+    }),
+    new HtmlPlugin({
+      filename: '../views/layouts/main.handlebars',
+      template: 'webpack/layout.hbs',
+      inject: 'head',
+      excludeChunks: ['upload', 'download']
+    }),
+    new HtmlPlugin({
+      filename: '../views/unsupported.handlebars',
+      template: 'webpack/unsupported.hbs',
+      inject: false
+    }),
+    new webpack.HashedModuleIdsPlugin(),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor'
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'runtime'
+    })
+  ]
 };

webpack/download.hbs

@@ -1,5 +1,4 @@
 <div id="download">
-  <script defer src="/download.js"></script>
   <div id="download-page-one">
     <div class="title">
       <span id="dl-file"
@@ -11,7 +10,7 @@
       <span id="dl-filesize"></span>
     </div>
     <div class="description" data-l10n-id="downloadMessage"></div>
-    <img src="/resources/illustration_download.svg" id="download-img" data-l10n-id="downloadAltText"/>
+    <img src="../public/resources/illustration_download.svg" id="download-img" data-l10n-id="downloadAltText"/>
     <div>
       <button id="download-btn" class="btn" data-l10n-id="downloadButtonLabel"></button>
     </div>
@@ -37,7 +36,7 @@
 
   <div id="upload-error" hidden="true">
     <div class="title" data-l10n-id="errorPageHeader"></div>
-    <img id="upload-error-img" data-l10n-id="errorAltText" src="/resources/illustration_error.svg"/>
+    <img id="upload-error-img" data-l10n-id="errorAltText" src="../public/resources/illustration_error.svg"/>
   </div>
 
   <a class="send-new" data-state="completed" data-l10n-id="sendYourFilesLink" href="/"></a>

webpack/layout.hbs

@@ -13,29 +13,28 @@
   <meta property="og:description" content="{{description}}"/>
   <meta name="twitter:description" content="{{description}}"/>
   <meta name="twitter:card" content="summary"/>
-  <meta property="og:image" content="{{baseUrl}}/resources/send-fb.jpg"/>
+  <meta property="og:image" content="{{baseUrl}}${require('../public/resources/send-fb.jpg')}"/>
-  <meta name="twitter:image" content="{{baseUrl}}/resources/send-twitter.jpg"/>
+  <meta name="twitter:image" content="{{baseUrl}}${require('../public/resources/send-twitter.jpg')}"/>
   <meta property="og:url" content="{{baseUrl}}"/>
 
   <title>{{title}}</title>
 
-  <link rel="stylesheet" type="text/css" href="/main.css" />
+  <link rel="stylesheet" type="text/css" href="${require('../frontend/src/main.css')}" />
   {{#if fira}}
   <link rel="stylesheet" type="text/css" href="https://code.cdn.mozilla.net/fonts/fira.css" />
   {{/if}}
 
-  <link rel="icon" type="image/png" href="/resources/favicon-32x32.png" sizes="32x32" />
+  <link rel="icon" type="image/png" href="${require('../public/resources/favicon-32x32.png')}" sizes="32x32" />
   <link rel="localization" href="/locales/{locale}/send.ftl">
 
   <script src="/jsconfig.js"></script>
-  <script src="/polyfill.min.js"></script>
   <script defer src="/l20n.min.js"></script>
 </head>
 <body>
   <header class="header">
     <div class="send-logo">
       <a href="/">
-        <img src="/resources/send_logo.svg" alt="Send"/><h1 class="site-title">Send</h1>
+        <img src="../public/resources/send_logo.svg" alt="Send"/><h1 class="site-title">Send</h1>
       </a>
       <div class="site-subtitle">
         <a href="https://testpilot.firefox.com">Firefox Test Pilot</a>
@@ -54,7 +53,7 @@
   </div>
   <div class="footer">
     <div class="legal-links">
-      <a href="https://www.mozilla.org" role="presentation"><img class="mozilla-logo" src="/resources/mozilla-logo.svg" alt="mozilla"/></a>
+      <a href="https://www.mozilla.org" role="presentation"><img class="mozilla-logo" src="../public/resources/mozilla-logo.svg" alt="mozilla"/></a>
       <a href="https://www.mozilla.org/about/legal" data-l10n-id="footerLinkLegal">Legal</a>
       <a href="https://testpilot.firefox.com/about" data-l10n-id="footerLinkAbout">About Test Pilot</a>
       <a href="/legal" data-l10n-id="footerLinkPrivacy">Privacy</a>
@@ -62,8 +61,8 @@
       <a href="https://www.mozilla.org/privacy/websites/#cookies" data-l10n-id="footerLinkCookies">Cookies</a>
     </div>
     <div class="social-links">
-      <a href="https://github.com/mozilla/send" role="presentation"><img class="github" src="/resources/github-icon.svg" alt="github"/></a>
+      <a href="https://github.com/mozilla/send" role="presentation"><img class="github" src="../public/resources/github-icon.svg" alt="github"/></a>
-      <a href="https://twitter.com/FxTestPilot" role="presentation"><img class="twitter" src="/resources/twitter-icon.svg" alt="twitter"/></a>
+      <a href="https://twitter.com/FxTestPilot" role="presentation"><img class="twitter" src="../public/resources/twitter-icon.svg" alt="twitter"/></a>
     </div>
   </div>
 </body>

webpack/notfound.hbs

@@ -1,7 +1,7 @@
 <div id="download">
 <div class="title" data-l10n-id="expiredPageHeader"></div>
 <div class="share-window">
-  <img src="/resources/illustration_expired.svg" id="expired-img" data-l10n-id="linkExpiredAlt"/>
+  <img src="../public/resources/illustration_expired.svg" id="expired-img" data-l10n-id="linkExpiredAlt"/>
 </div>
 <div class="expired-description" data-l10n-id="uploadPageExplainer"></div>
 <a class="send-new" href="/" data-state="notfound" data-l10n-id="sendYourFilesLink"></a>

webpack/unsupported.hbs

@@ -3,14 +3,14 @@
   {{#if outdated}}
     <div class="description" data-l10n-id="notSupportedOutdatedDetail">Unfortunately this version of Firefox does not support the web technology that powers Firefox Send. You’ll need to update your browser.</div>
     <a id="update-firefox" href="https://support.mozilla.org/kb/update-firefox-latest-version">
-      <img src="/resources/firefox_logo-only.svg" class="firefox-logo" alt="Firefox"/>
+      <img src="../public/resources/firefox_logo-only.svg" class="firefox-logo" alt="Firefox"/>
       <div class="unsupported-button-text" data-l10n-id="updateFirefox">Update Firefox</div>
     </a>
   {{else}}
     <div class="description" data-l10n-id="notSupportedDetail">Unfortunately this browser does not support the web technology that powers Firefox Send. You’ll need to try another browser. We recommend Firefox!</div>
     <div class="description"><a href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-is-my-browser-not-supported" data-l10n-id="notSupportedLink">Why is my browser not supported?</a></div>
     <a id="dl-firefox" href="https://www.mozilla.org/firefox/new/?scene=2">
-      <img src="/resources/firefox_logo-only.svg" class="firefox-logo" alt="Firefox"/>
+      <img src="../public/resources/firefox_logo-only.svg" class="firefox-logo" alt="Firefox"/>
       <div class="unsupported-button-text">Firefox<br>
         <span data-l10n-id="downloadFirefoxButtonSub">Free Download</span>
       </div>

webpack/upload.hbs

@@ -1,12 +1,11 @@
 <div id="page-one" hidden>
-  <script defer src="/upload.js"></script>
   <div class="title" data-l10n-id="uploadPageHeader"></div>
   <div class="description">
     <div data-l10n-id="uploadPageExplainer"></div>
     <a href="https://testpilot.firefox.com/experiments/send" class="link" data-l10n-id="uploadPageLearnMore"></a>
   </div>
   <div class="upload-window" >
-    <div id="upload-img"><img data-l10n-id="uploadSvgAlt" src="/resources/upload.svg"/></div>
+    <div id="upload-img"><img data-l10n-id="uploadSvgAlt" src="../public/resources/upload.svg"/></div>
     <div id="upload-text" data-l10n-id="uploadPageDropMessage"></div>
     <span id="file-size-msg"><em data-l10n-id="uploadPageSizeMessage"></em></span>
     <form method="post" action="upload" enctype="multipart/form-data">
@@ -71,6 +70,6 @@
 <div id="upload-error" hidden="true">
   <div class="title" data-l10n-id="errorPageHeader"></div>
   <div class="expired-description" data-l10n-id="errorPageMessage"></div>
-  <img id="upload-error-img" data-l10n-id="errorAltText" src="/resources/illustration_error.svg"/>
+  <img id="upload-error-img" data-l10n-id="errorAltText" src="../public/resources/illustration_error.svg"/>
   <a class="send-new" href="/" data-state="errored" data-l10n-id="sendAnotherFileLink"></a>
 </div>