Proper creation of styles assets and production update for 0 downtime…

… asset serving

docker-compose.yml

@@ -2,7 +2,7 @@ version: '2'
 services:
   web:
     build: web
-    command: ./node_modules/.bin/nodemon server.js
+    command: npm run server-dev
     depends_on: [mongo, memcached]
     environment:
       - ENV=development

production_gce.yml

@@ -7,11 +7,14 @@ services:
       - ENV=production
       - MEMCACHED_HOST=memcached
       - MONGO_URL=mongodb://mongo:27017/electricity
+      - STATIC_PATH=/opt/static
       - VIRTUAL_HOST=electricitymap.tmrow.co
     image: eu.gcr.io/tmrow-152415/electricitymap_web:production
     mem_limit: 100M
     networks: [default, infrastructure] # required to be able to com' with statsd & nginx
     restart: unless-stopped
+    volumes:
+      - /home/shared/electricitymap/static/dist:/opt/static/dist
   feeder:
     depends_on: [mongo]
     env_file: [./mailgun.env, ./secrets.env]

web/.dockerignore

@@ -1 +1,4 @@
+build
 node_modules
+public/dist
+world_*.json

web/package.json

@@ -18,7 +18,6 @@
     "topojson": "^2.2.0"
   },
   "devDependencies": {
-    "clean-webpack-plugin": "^0.1.14",
     "nodemon": "^1.10.2",
     "webpack": "^1.13.3"
   },
@@ -27,11 +26,11 @@
     "url": "https://github.com/corradio/electricitymap.git"
   },
   "scripts": {
-    "build": "webpack",
+    "build": "webpack --bail",
     "build-debug": "BUILD=debug npm run build",
     "build-release": "BUILD=release npm run build",
     "clean": "mkdir -p public/dist && rm public/dist/bundle.*.js",
     "server-dev": "nodemon server.js",
-    "watch": "BUILD=debug webpack --watch --progress"
+    "watch": "BUILD=debug webpack --watch --progress --bail"
   }
 }

web/server.js

@@ -31,10 +31,11 @@ app.use(compression()); // Cloudflare already does gzip but we do it anyway
 app.disable('etag'); // Disable etag generation (except for static)
 
 // * Static and templating
-app.use(express.static(__dirname + '/public', {etag: true, maxAge: isProduction ? '24h': '0'}));
+var STATIC_PATH = process.env['STATIC_PATH'] || (__dirname + '/public');
+app.use(express.static(STATIC_PATH, {etag: true, maxAge: isProduction ? '24h': '0'}));
 app.set('view engine', 'ejs');
 var BUNDLE_HASH = !isProduction ? 'dev' : 
-    JSON.parse(fs.readFileSync('public/dist/manifest.json')).hash;
+    JSON.parse(fs.readFileSync(STATIC_PATH + '/dist/manifest.json')).hash;
 
 // * Cache
 var memcachedClient = new Memcached(process.env['MEMCACHED_HOST']);
@@ -543,10 +544,6 @@ app.get('/health', function(req, res) {
         }
     });
 });
-app.get(`/dist/styles.${BUNDLE_HASH}.css`, function(req, res) {
-    res.setHeader('Cache-Control', 'public, max-age=' + (isProduction ? '86400' : '0'));
-    res.sendFile(__dirname + '/public/css/styles.css');
-});
 app.get('/', function(req, res) {
     res.render('pages/index', {
         'bundleHash': BUNDLE_HASH,

web/views/pages/index.ejs

@@ -21,7 +21,6 @@
 
         <link rel="stylesheet" type="text/css" href="dist/styles.<%= bundleHash %>.css">
         <link rel="stylesheet" type="text/css" href="flag-icon-css/css/flag-icon.min.css">
-        <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
 
         <script defer src="https://d3tvtfb6518e3e.cloudfront.net/3/opbeat.min.js"></script>
         <script defer src="dist/bundle.<%= bundleHash %>.js"></script>

web/webpack.config.js

@@ -1,4 +1,5 @@
 var webpack = require('webpack');
+var fs = require('fs');
 
 module.exports = {
   devtool: (process.env.BUILD === 'debug' ? 'eval' : 'sourcemap'),
@@ -13,7 +14,15 @@ module.exports = {
     }),
     function() {
       this.plugin('done', function(stats) {
-        require('fs').writeFileSync(
+        fs.createReadStream(__dirname + '/public/css/styles.css')
+          .pipe(fs.createWriteStream(
+            __dirname + '/public/dist/styles.' + 
+              (process.env.BUILD === 'debug' ? 'dev' : stats.hash) + '.css'));
+      });
+    },
+    function() {
+      this.plugin('done', function(stats) {
+        fs.writeFileSync(
           __dirname + '/public/dist/manifest.json',
           JSON.stringify(stats.toJson()));
       });