chore(ui): allow deployment configuration (#15383)

hopefully this commit doesnt do anything, but it opens up the ability to change the static folder of the project through the environment variable STATIC_FOLDER so that we can cache static files and not cache the index file (allowing more passive deployment strategies), and allows the user to change the base path of the project with the BASE_PATH variable, opening up the ability to run an instance behind an nginx proxy, though that change is pending an update to the @influxdata/oats package before we can turn it on
influxdata · Oct 11, 2019 · f08152c · f08152c
1 parent 79f8cf0
commit f08152c
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 10 deletions.
diff --git a/ui/.dockerignore b/ui/.dockerignore
@@ -0,0 +1 @@
+./node_modules
diff --git a/ui/assets/index.html b/ui/assets/index.html
@@ -10,6 +10,6 @@
     <base href="/" />
   </head>
   <body>
-    <div id="react-root" data-basepath=""></div>
+    <div id="react-root" data-basepath="<%= htmlWebpackPlugin.options.base %>"></div>
   </body>
 </html>
diff --git a/ui/src/utils/env.test.ts b/ui/src/utils/env.test.ts
@@ -0,0 +1,35 @@
+const {formatStatic, formatBase} = require('./env')
+
+describe('enviroment normalization', () => {
+  describe('static path formatter', () => {
+    it('should strip the first slash', () => {
+      expect(formatStatic('/neateo')).toBe('neateo')
+    })
+
+    it('should strip the last slash', () => {
+      expect(formatStatic('neateo/')).toBe('neateo')
+    })
+
+    it('should ignore middle slashes', () => {
+      expect(formatStatic('n/ea/teo')).toBe('n/ea/teo')
+    })
+
+    it('should pass through no slashes', () => {
+      expect(formatStatic('neateo')).toBe('neateo')
+    })
+  })
+
+  describe('base path formatter', () => {
+    it('should ignore properly formatted things', () => {
+      expect(formatBase('/neateo/')).toBe('/neateo/')
+    })
+
+    it('should add a slash at the beginning', () => {
+      expect(formatBase('neateo/')).toBe('/neateo/')
+    })
+
+    it('should add a slash at the end', () => {
+      expect(formatBase('/neateo')).toBe('/neateo/')
+    })
+  })
+})
diff --git a/ui/src/utils/env.ts b/ui/src/utils/env.ts
@@ -0,0 +1,57 @@
+module.exports = (() => {
+  const GIT_SHA =
+    process.env.INFLUXDB_SHA ||
+    require('child_process')
+      .execSync('git rev-parse HEAD')
+      .toString()
+
+  // Webpack has some specific rules about formatting
+  // lets protect our developers from that!
+  function formatStatic(dir) {
+    if (!dir.length) {
+      return dir
+    }
+
+    // NOTE: slices for sideeffect free editing (alex)
+    let _dir = dir.slice(0)
+
+    if (_dir[0] === '/') {
+      _dir = _dir.slice(1)
+    }
+
+    if (_dir[_dir.length - 1] === '/') {
+      _dir = _dir.slice(0, -1)
+    }
+
+    return _dir
+  }
+
+  // Webpack has some specific rules about formatting
+  // lets protect our developers from that!
+  function formatBase(prefix) {
+    if (prefix === '/') {
+      return prefix
+    }
+
+    // NOTE: slices for sideeffect free editing (alex)
+    let _prefix = prefix.slice(0)
+
+    if (_prefix[0] !== '/') {
+      _prefix = '/' + _prefix
+    }
+
+    if (_prefix[_prefix.length - 1] !== '/') {
+      _prefix = _prefix + '/'
+    }
+
+    return _prefix
+  }
+
+  const STATIC_DIRECTORY = formatStatic(process.env.STATIC_DIRECTORY || '')
+  const BASE_PATH = '/'
+  // TODO: adding a basePath feature in the @influxdata/oats
+  // project is currently required before turning this on (alex)
+  //const BASE_PATH = formatBase(process.env.BASE_PATH || '/')
+
+  return {formatStatic, formatBase, GIT_SHA, STATIC_DIRECTORY, BASE_PATH}
+})()
diff --git a/ui/webpack.common.ts b/ui/webpack.common.ts
@@ -2,15 +2,19 @@ const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const {CleanWebpackPlugin} = require('clean-webpack-plugin')
 const webpack = require('webpack')
-const GIT_SHA = require('child_process')
-  .execSync('git rev-parse HEAD')
-  .toString()
+const {
+  GIT_SHA,
+  STATIC_DIRECTORY,
+  BASE_PATH,
+} = require('./src/utils/env')
 
 module.exports = {
   context: __dirname,
   output: {
     path: path.resolve(__dirname, 'build'),
-    sourceMapFilename: '[name].js.map',
+    publicPath: BASE_PATH,
+    webassemblyModuleFilename: `${STATIC_DIRECTORY}[modulehash:10].wasm`,
+    sourceMapFilename: `${STATIC_DIRECTORY}[name].js.map`,
   },
   entry: {
     app: './src/bootstrap.ts',
@@ -40,11 +44,21 @@ module.exports = {
       },
       {
         test: /\.(png|svg|jpg|gif)$/,
-        use: ['file-loader'],
+        use: [{
+          loader: 'file-loader',
+          options: {
+            name: `${STATIC_DIRECTORY}[contenthash:10].[ext]`
+          }
+        }],
       },
       {
         test: /\.(woff|woff2|eot|ttf|otf)$/,
-        use: ['file-loader'],
+        use: [{
+          loader: 'file-loader',
+          options: {
+            name: `${STATIC_DIRECTORY}[contenthash:10].[ext]`
+          }
+        }],
       },
     ],
   },
@@ -55,6 +69,7 @@ module.exports = {
       template: './assets/index.html',
       favicon: './assets/images/favicon.ico',
       inject: 'body',
+      base: BASE_PATH.slice(0, -1),
     }),
     new webpack.ProgressPlugin(),
     new webpack.EnvironmentPlugin({...process.env, GIT_SHA}),

diff --git a/ui/webpack.prod.ts b/ui/webpack.prod.ts
@@ -11,11 +11,13 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const TerserJSPlugin = require('terser-webpack-plugin')
 
+const {STATIC_DIRECTORY} = require('./src/utils/env')
+
 module.exports = merge(common, {
   mode: 'production',
   devtool: 'source-map',
   output: {
-    filename: '[name].[hash].js',
+    filename: `${STATIC_DIRECTORY}[contenthash:10].js`,
   },
   module: {
     rules: [
@@ -59,8 +61,8 @@ module.exports = merge(common, {
   },
   plugins: [
     new MiniCssExtractPlugin({
-      filename: '[name].[hash].css',
-      chunkFilename: '[id].[hash].css',
+      filename: `${STATIC_DIRECTORY}[contenthash:10].css`,
+      chunkFilename: `${STATIC_DIRECTORY}[id].[contenthash:10].css`,
     }),
     new ForkTsCheckerWebpackPlugin(),
   ],