Version all bundles

This will tell webpack to add a hash to all bundles filenames, we generate script tags for loading those and inject them as templates. No more forced cache bypassing

Makefile

@@ -49,8 +49,7 @@ endif
 	rm -f .build/bindata_assetfs.*
 	touch $@
 
-bindata_assetfs.go: .build/deps.ok .build/bindata_assetfs.$(GO_BINDATA_MODE) $(ASSET_SOURCES)
-	rm -f assets/static/dist/*
+bindata_assetfs.go: .build/deps.ok .build/bindata_assetfs.$(GO_BINDATA_MODE) $(ASSET_SOURCES) webpack.config.js
 	webpack -p
 	go-bindata-assetfs $(GO_BINDATA_FLAGS) -prefix assets -nometadata assets/templates/... assets/static/dist/...
 

assets.go

@@ -43,8 +43,7 @@ func newBinaryFileSystem(root string) *binaryFileSystem {
 // load all templates from binary asset resource
 // this function will iterate all files with given prefix (e.g. /templates/)
 // and return Template instance with all templates loaded
-func loadTemplates(prefix string) *template.Template {
-	var t *template.Template
+func loadTemplates(t *template.Template, prefix string) *template.Template {
 	for _, filename := range AssetNames() {
 		if strings.HasPrefix(filename, prefix) {
 			templateContent, err := Asset(filename)

assets/templates/help.html

@@ -307,4 +307,5 @@
 
 </html>
 
-<script type="text/javascript" src="{{ .WebPrefix }}static/dist/help.js?_={{ .NowQ }}"></script>
+{{ template "static/dist/templates/loader_shared.html" }}
+{{ template "static/dist/templates/loader_help.html" }}

assets/templates/index.html

@@ -169,7 +169,8 @@
 </body>
 </html>
 
-<script type="text/javascript" src="{{ .WebPrefix }}static/dist/unsee.js?_={{ .NowQ }}"></script>
+{{ template "static/dist/templates/loader_shared.html" }}
+{{ template "static/dist/templates/loader_unsee.html" }}
 
 {{ template "templates/alertgroup.html" }}
 {{ template "templates/summary.html" }}

main.go

@@ -1,6 +1,7 @@
 package main
 
 import (
+	"html/template"
 	"path"
 	"strings"
 	"time"
@@ -107,7 +108,11 @@ func main() {
 	}
 
 	router := gin.New()
-	router.SetHTMLTemplate(loadTemplates("templates"))
+
+	var t *template.Template
+	t = loadTemplates(t, "templates")
+	t = loadTemplates(t, "static/dist/templates")
+	router.SetHTMLTemplate(t)
 
 	prom := ginprometheus.NewPrometheus("gin")
 	prom.MetricsPath = getViewURL("/metrics")

package.json

@@ -1,9 +1,9 @@
 {
   "name": "unsee",
   "license": "Apache-2.0",
-  "repository" : {
-    "type" : "git",
-    "url" : "https://github.com/cloudflare/unsee.git"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cloudflare/unsee.git"
   },
   "scripts": {
     "test": "jest"
@@ -47,6 +47,7 @@
     "babel-preset-es2015": "^6.24.1",
     "bootstrap-loader": "^2.1.0",
     "bootstrap-sass": "^3.3.7",
+    "clean-webpack-plugin": "^0.1.16",
     "css-loader": "^0.28.4",
     "eslint": "^4.3.0",
     "expose-loader": "^0.7.3",

views.go

@@ -41,7 +41,6 @@ func index(c *gin.Context) {
 	c.HTML(http.StatusOK, "templates/index.html", gin.H{
 		"Version":           version,
 		"SentryDSN":         config.Config.SentryPublicDSN,
-		"NowQ":              start.Unix(),
 		"Config":            config.Config,
 		"QFilter":           q,
 		"DefaultUsed":       defaultUsed,

views_test.go

@@ -3,6 +3,7 @@ package main
 import (
 	"encoding/json"
 	"fmt"
+	"html/template"
 	"net/http"
 	"net/http/httptest"
 	"os"
@@ -37,7 +38,10 @@ func mockConfig() {
 func ginTestEngine() *gin.Engine {
 	gin.SetMode(gin.TestMode)
 	r := gin.New()
-	r.SetHTMLTemplate(loadTemplates("templates"))
+	var t *template.Template
+	t = loadTemplates(t, "templates")
+	t = loadTemplates(t, "static/dist/templates")
+	r.SetHTMLTemplate(t)
 	setupRouter(r)
 	return r
 }
@@ -380,7 +384,7 @@ var staticFileTests = []staticFileTestCase{
 		code: 200,
 	},
 	staticFileTestCase{
-		path: "/static/dist/unsee.js",
+		path: "/static/dist/favicon.ico",
 		code: 200,
 	},
 	staticFileTestCase{
@@ -412,7 +416,7 @@ var staticFilePrefixTests = []staticFileTestCase{
 		code: 200,
 	},
 	staticFileTestCase{
-		path: "/sub/static/dist/unsee.js",
+		path: "/sub/static/dist/favicon.ico",
 		code: 200,
 	},
 	staticFileTestCase{

webpack.config.js

@@ -1,5 +1,7 @@
 const webpack = require("webpack");
 const path = require("path");
+const fs = require("fs");
+const CleanWebpackPlugin = require("clean-webpack-plugin");
 
 const config = {
     context: path.resolve(__dirname, "assets/static"), // eslint-disable-line
@@ -9,14 +11,34 @@ const config = {
     },
     output: {
         path: path.resolve(__dirname, "assets/static/dist"), // eslint-disable-line
-        publicPath: "../static/dist/",
-        filename: "[name].js"
+        publicPath: "static/dist/",
+        filename: "[name].[chunkhash].js"
     },
     plugins: [
         new webpack.ProvidePlugin({
             $: "jquery",
             jQuery: "jquery"
-        })
+        }),
+        new CleanWebpackPlugin([ "assets/static/dist" ]),
+        new webpack.optimize.CommonsChunkPlugin({
+            name: "shared"
+        }),
+        // this will generate loader_${name}.html files that will have
+        // a <script/> line for loading hashed chunk
+        // inspited by https://github.com/webpack/webpack/issues/86
+        function() {
+            this.plugin("done", function(statsData) {
+                var stats = statsData.toJson();
+                if (!stats.errors.length) {
+                    fs.mkdirSync(path.join(__dirname, "assets/static/dist/templates")); // eslint-disable-line
+                    for (var chunkName in stats.assetsByChunkName) {
+                        var loaderName = "loader_" + chunkName + ".html";
+                        var loaderScript = "<script type='text/javascript' src='static/dist/" + stats.assetsByChunkName[chunkName] + "'></script>";
+                        fs.writeFileSync(path.join(__dirname, "assets/static/dist/templates", loaderName), loaderScript); // eslint-disable-line
+                    }
+                }
+            });
+        }
     ],
     externals: {
         "window":"window"