Improving caching of static assets (#3591)

Makefile

@@ -268,9 +268,6 @@ package: build build-client
 	@# Package webapp
 	mkdir -p $(DIST_PATH)/webapp/dist
 	cp -RL $(BUILD_WEBAPP_DIR)/dist $(DIST_PATH)/webapp
-	mv $(DIST_PATH)/webapp/dist/bundle.js $(DIST_PATH)/webapp/dist/bundle-$(BUILD_NUMBER).js
-	sed -i'.bak' 's|bundle.js|bundle-$(BUILD_NUMBER).js|g' $(DIST_PATH)/webapp/dist/root.html
-	rm $(DIST_PATH)/webapp/dist/root.html.bak
 
 	@# Help files
 ifeq ($(BUILD_ENTERPRISE_READY),true)

web/web.go

@@ -29,15 +29,22 @@ func InitWeb() {
 		staticDir := utils.FindDir(CLIENT_DIR)
 		l4g.Debug("Using client directory at %v", staticDir)
 		if *utils.Cfg.ServiceSettings.WebserverMode == "gzip" {
-			mainrouter.PathPrefix("/static/").Handler(gziphandler.GzipHandler(http.StripPrefix("/static/", http.FileServer(http.Dir(staticDir)))))
+			mainrouter.PathPrefix("/static/").Handler(gziphandler.GzipHandler(staticHandler(http.StripPrefix("/static/", http.FileServer(http.Dir(staticDir))))))
 		} else {
-			mainrouter.PathPrefix("/static/").Handler(http.StripPrefix("/static/", http.FileServer(http.Dir(staticDir))))
+			mainrouter.PathPrefix("/static/").Handler(staticHandler(http.StripPrefix("/static/", http.FileServer(http.Dir(staticDir)))))
 		}
 
 		mainrouter.Handle("/{anything:.*}", api.AppHandlerIndependent(root)).Methods("GET")
 	}
 }
 
+func staticHandler(handler http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Cache-Control", "max-age=31556926, public")
+		handler.ServeHTTP(w, r)
+	})
+}
+
 var browsersNotSupported string = "MSIE/8;MSIE/9;MSIE/10;Internet Explorer/8;Internet Explorer/9;Internet Explorer/10;Safari/7;Safari/8"
 
 func CheckBrowserCompatability(c *api.Context, r *http.Request) bool {
@@ -68,5 +75,6 @@ func root(c *api.Context, w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	w.Header().Set("Cache-Control", "no-cache, max-age=31556926, public")
 	http.ServeFile(w, r, utils.FindDir(CLIENT_DIR)+"root.html")
 }

webapp/Makefile

@@ -20,6 +20,8 @@ test: .npminstall
 build: .npminstall
 	@echo Building mattermost Webapp
 
+	rm -rf dist
+
 	npm run build
 
 run: .npminstall

webapp/i18n/i18n.jsx

@@ -1,11 +1,11 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-const de = require('!!file?name=i18n/[name].[ext]!./de.json');
+const de = require('!!file?name=i18n/[name].[hash].[ext]!./de.json');
-const es = require('!!file?name=i18n/[name].[ext]!./es.json');
+const es = require('!!file?name=i18n/[name].[hash].[ext]!./es.json');
-const fr = require('!!file?name=i18n/[name].[ext]!./fr.json');
+const fr = require('!!file?name=i18n/[name].[hash].[ext]!./fr.json');
-const ja = require('!!file?name=i18n/[name].[ext]!./ja.json');
+const ja = require('!!file?name=i18n/[name].[hash].[ext]!./ja.json');
-const pt_BR = require('!!file?name=i18n/[name].[ext]!./pt-BR.json'); //eslint-disable-line camelcase
+const pt_BR = require('!!file?name=i18n/[name].[hash].[ext]!./pt-BR.json'); //eslint-disable-line camelcase
 
 import {addLocaleData} from 'react-intl';
 import deLocaleData from 'react-intl/locale-data/de';

webapp/package.json

@@ -50,6 +50,7 @@
     "extract-text-webpack-plugin": "1.0.1",
     "file-loader": "0.8.5",
     "html-loader": "0.4.3",
+    "html-webpack-plugin": "2.22.0",
     "imports-loader": "0.6.5",
     "image-webpack-loader": "1.8.0",
     "jquery-deferred": "0.3.0",

webapp/root.html

@@ -34,11 +34,8 @@
 
     <!-- CSS Should always go first -->
     <link rel='stylesheet' class='code_theme'>
-    <!--<link rel='stylesheet' href='/static/css/styles.css'>-->
     <style id='antiClickjack'>body{display:none !important;}</style>
 
-    <script src='/static/bundle.js'></script>
-
     <script type='text/javascript'>
         if (self === top) {
             var blocker = document.getElementById('antiClickjack');

webapp/webpack.config.js

@@ -4,7 +4,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const nodeExternals = require('webpack-node-externals');
 
-const htmlExtract = new ExtractTextPlugin('html', 'root.html');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const NPM_TARGET = process.env.npm_lifecycle_event; //eslint-disable-line no-process-env
 
@@ -28,8 +28,8 @@ var config = {
     output: {
         path: 'dist',
         publicPath: '/static/',
-        filename: 'bundle.js',
+        filename: '[name].[hash].js',
-        chunkFilename: '[name].[hash].[chunkhash].js'
+        chunkFilename: '[name].[chunkhash].js'
     },
     module: {
         loaders: [
@@ -90,7 +90,7 @@ var config = {
             },
             {
                 test: /\.html$/,
-                loader: htmlExtract.extract('html?attrs=link:href')
+                loader: 'html?attrs=link:href'
             }
         ]
     },
@@ -101,7 +101,6 @@ var config = {
         new webpack.ProvidePlugin({
             'window.jQuery': 'jquery'
         }),
-        htmlExtract,
         new CopyWebpackPlugin([
             {from: 'images/emoji', to: 'emoji'},
             {from: 'images/logo-email.png', to: 'images'},
@@ -168,7 +167,18 @@ if (!DEV) {
 
 // Test mode configuration
 if (TEST) {
+    config.entry = ['babel-polyfill', './root.jsx'];
+    config.target = 'node';
     config.externals = [nodeExternals()];
+} else {
+    // For some reason this breaks mocha. So it goes here.
+    config.plugins.push(
+        new HtmlWebpackPlugin({
+            filename: 'root.html',
+            inject: 'head',
+            template: 'root.html'
+        })
+    );
 }
 
 module.exports = config;