From 0ab8ddc89461b666f50eedec984f95653cc16737 Mon Sep 17 00:00:00 2001 From: Danny Coates Date: Tue, 15 Aug 2017 11:55:52 -0700 Subject: [PATCH 1/2] groundwork for asset caching --- .dockerignore | 1 + .gitignore | 7 +------ docker-compose.yml | 1 + frontend/src/upload.js | 2 +- package-lock.json | 43 +++++++++++++++++++++++++++++++++++++++ package.json | 11 ++++++---- scripts/version.js | 2 +- server/server.js | 23 ++++++++++++++------- views/download.handlebars | 2 +- views/index.handlebars | 2 +- webpack.config.js | 8 +++++--- 11 files changed, 78 insertions(+), 24 deletions(-) diff --git a/.dockerignore b/.dockerignore index ac82f884..ae07c677 100644 --- a/.dockerignore +++ b/.dockerignore @@ -6,3 +6,4 @@ test scripts docs firefox +public diff --git a/.gitignore b/.gitignore index 4fa2078f..2aa3a824 100644 --- a/.gitignore +++ b/.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 diff --git a/docker-compose.yml b/docker-compose.yml index f72bf161..37fb258e 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -8,5 +8,6 @@ services: - "1443:1443" environment: - REDIS_HOST=redis + - NODE_ENV=production redis: image: redis:alpine diff --git a/frontend/src/upload.js b/frontend/src/upload.js index 6ab00981..393b60f0 100644 --- a/frontend/src/upload.js +++ b/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'); diff --git a/package-lock.json b/package-lock.json index 931cd167..06eb1cc2 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 78af54d9..806635a8 100644 --- a/package.json +++ b/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", diff --git a/scripts/version.js b/scripts/version.js index 0a68ff7f..b477197e 100755 --- a/scripts/version.js +++ b/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, diff --git a/server/server.js b/server/server.js index 7ff4e115..6bc8e456 100644 --- a/server/server.js +++ b/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( - 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, diff --git a/views/download.handlebars b/views/download.handlebars index b78f6460..527dd476 100644 --- a/views/download.handlebars +++ b/views/download.handlebars @@ -1,5 +1,5 @@
- +