Cleanup front-end build and python module contents (#1350)

* cleanup build and module contents

* lint

* update chalk

* more cleanup

* fix unit test

Makefile

@@ -32,7 +32,7 @@ build-client:
 
 .PHONY: build-cli
 build-cli: build-client
-	git ls-files server/ | cpio -pdm $(BUILDDIR)
+	git ls-files server/ | grep -v 'server/test/' | cpio -pdm $(BUILDDIR)
 	cp -r client/build/  $(CLIENTBUILD)
 	$(call copy_client_assets,$(CLIENTBUILD),$(SERVERBUILD))
 	cp MANIFEST.in README.md setup.cfg setup.py $(BUILDDIR)

client/configuration/webpack/webpack.config.dev.js

@@ -2,6 +2,7 @@
 const path = require("path");
 const webpack = require("webpack");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
+const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
 
 const src = path.resolve("src");
 const fonts = path.resolve("src/fonts");
@@ -60,30 +61,32 @@ module.exports = {
 
       { test: /\.json$/, include: [src, nodeModules], loader: "json-loader" },
       {
-        test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
+        test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2|otf)$/i,
-        include: nodeModules,
         loader: "file-loader",
-        query: { name: "static/media/[name].[ext]" }
+        include: [nodeModules, fonts],
-      },
+        query: { name: "static/assets/[name].[ext]" }
-      {
-        test: /\.(woff|woff2|eot|ttf|otf)$/,
-        include: fonts,
-        loader: "file-loader",
-        query: { name: "static/fonts/[name].[ext]" }
-      },
-      {
-        test: /\.(mp4|webm)(\?.*)?$/,
-        include: [src, nodeModules],
-        loader: "url-loader",
-        query: { limit: 10000, name: "static/media/[name].[ext]" }
       }
     ]
   },
   plugins: [
     new HtmlWebpackPlugin({
       inject: true,
-      template: path.resolve("index.html"),
+      template: path.resolve("index.html")
-      favicon: path.resolve("favicon.png")
+    }),
+    new FaviconsWebpackPlugin({
+      logo: "./favicon.png",
+      prefix: "static/img/",
+      favicons: {
+        icons: {
+          android: false,
+          appleIcon: false,
+          appleStartup: false,
+          coast: false,
+          firefox: false,
+          windows: false,
+          yandex: false
+        }
+      }
     }),
     new webpack.NoEmitOnErrorsPlugin(),
     new webpack.DefinePlugin({

client/configuration/webpack/webpack.config.prod.js

@@ -2,8 +2,9 @@
 const path = require("path");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const SWPrecacheWebpackPlugin = require("sw-precache-webpack-plugin");
 const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin");
+const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 
 const src = path.resolve("src");
 const fonts = path.resolve("src/fonts");
@@ -17,11 +18,9 @@ module.exports = {
   mode: "production",
   bail: true,
   cache: false,
-  devtool: "cheap-source-map",
   entry: ["./src/index.js"],
   output: {
     path: path.resolve("build"),
-    filename: "static/js/[name].[chunkhash:8].js",
     publicPath
   },
   module: {
@@ -69,22 +68,10 @@ module.exports = {
         exclude: /manifest.json$/
       },
       {
-        test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
+        test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2|otf)$/i,
-        include: nodeModules,
         loader: "file-loader",
-        query: { name: "static/media/[name].[ext]" }
+        include: [nodeModules, fonts],
-      },
+        query: { name: "static/assets/[name]-[contenthash].[ext]" }
-      {
-        test: /\.(woff|woff2|eot|ttf|otf)$/,
-        include: fonts,
-        loader: "file-loader",
-        query: { name: "static/fonts/[name].[ext]" }
-      },
-      {
-        test: /\.(mp4|webm)(\?.*)?$/,
-        include: [src, nodeModules],
-        loader: "url-loader",
-        query: { limit: 10000, name: "static/media/[name].[hash:8].[ext]" }
       }
     ]
   },
@@ -93,7 +80,6 @@ module.exports = {
       inject: "body",
       filename: "index.html",
       template: path.resolve("index_template.html"),
-      favicon: path.resolve("favicon.png"),
       inlineSource: ".(js|css)$",
       minify: {
         removeComments: true,
@@ -108,14 +94,28 @@ module.exports = {
         minifyURLs: true
       }
     }),
-    new HtmlWebpackInlineSourcePlugin(),
+    new CleanWebpackPlugin({
-    new MiniCssExtractPlugin({
+      verbose: true,
-      filename: "static/css/[name].[contenthash:8].css"
+      protectWebpackAssets: false,
+      cleanAfterEveryBuildPatterns: ["main.js", "main.css"]
     }),
-    new SWPrecacheWebpackPlugin({
+    new FaviconsWebpackPlugin({
-      cacheId: "cellxgene",
+      logo: "./favicon.png",
-      filename: "service-worker.js"
+      prefix: "static/assets/",
-    })
+      favicons: {
+        icons: {
+          android: false,
+          appleIcon: false,
+          appleStartup: false,
+          coast: false,
+          firefox: false,
+          windows: false,
+          yandex: false
+        }
+      }
+    }),
+    new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
+    new MiniCssExtractPlugin()
   ],
   performance: {
     maxEntrypointSize: 2000000,

client/index_template.html

@@ -34,7 +34,6 @@
                 box-sizing: border-box;
             }
         </style>
-        <link rel="shortcut icon" href="/static/img/favicon.png" />
     </head>
     <body>
         <script type="text/javascript">

client/package.json

@@ -33,13 +33,13 @@
     "flatbuffers": "^1.11.0",
     "fuzzysort": "^1.1.4",
     "gl-mat4": "^1.2.0",
-    "gl-matrix": "^3.2.1",
+    "gl-matrix": "^3.3.0",
     "gl-vec3": "^1.1.3",
     "is-number": "^7.0.0",
     "lodash": "^4.17.15",
     "memoize-one": "^5.1.1",
-    "react": "^16.13.0",
+    "react": "^16.13.1",
-    "react-dom": "^16.13.0",
+    "react-dom": "^16.13.1",
     "react-flip-toolkit": "7.0.6",
     "react-helmet": "^5.2.1",
     "react-icons": "^3.9.0",
@@ -49,43 +49,45 @@
     "regl": "^1.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.8.7",
+    "@babel/core": "^7.9.0",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-proposal-decorators": "^7.8.3",
     "@babel/plugin-proposal-export-namespace-from": "^7.8.3",
     "@babel/plugin-proposal-function-bind": "^7.8.3",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
-    "@babel/plugin-proposal-optional-chaining": "^7.8.3",
+    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
-    "@babel/plugin-transform-react-constant-elements": "^7.8.3",
+    "@babel/plugin-transform-react-constant-elements": "^7.9.0",
-    "@babel/plugin-transform-runtime": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.9.0",
-    "@babel/preset-env": "^7.8.7",
+    "@babel/preset-env": "^7.9.0",
-    "@babel/preset-react": "^7.8.3",
+    "@babel/preset-react": "^7.9.4",
-    "@babel/register": "^7.8.6",
+    "@babel/register": "^7.9.0",
-    "@babel/runtime": "^7.8.7",
+    "@babel/runtime": "^7.9.2",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^25.1.0",
+    "babel-jest": "^25.2.6",
-    "babel-loader": "^8.0.6",
+    "babel-loader": "^8.1.0",
-    "babel-preset-modern-browsers": "^14.1.1",
+    "babel-preset-modern-browsers": "^14.2.1",
-    "chalk": "^3.0.0",
+    "chalk": "^4.0.0",
+    "clean-webpack-plugin": "^3.0.0",
     "codecov": "^3.6.5",
     "connect-history-api-fallback": "^1.6.0",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.4.2",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-prettier": "^6.10.0",
+    "eslint-config-prettier": "^6.10.1",
-    "eslint-loader": "^3.0.3",
+    "eslint-loader": "^3.0.4",
     "eslint-plugin-filenames": "^1.3.2",
-    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jest": "^23.8.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^2.5.0",
+    "eslint-plugin-react-hooks": "^2.5.1",
     "express": "^4.17.1",
-    "file-loader": "^5.1.0",
+    "favicons-webpack-plugin": "^3.0.1",
-    "html-webpack-inline-source-plugin": "0.0.10",
+    "file-loader": "^6.0.0",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-inline-source-plugin": "^1.0.0-beta.2",
-    "jest": "^25.1.0",
+    "html-webpack-plugin": "^4.0.0",
+    "jest": "^25.2.7",
     "jest-puppeteer": "^4.4.0",
     "json-loader": "^0.5.7",
     "mini-css-extract-plugin": "^0.9.0",
@@ -94,8 +96,8 @@
     "serve-favicon": "^2.5.0",
     "style-loader": "^1.1.3",
     "sw-precache-webpack-plugin": "^1.0.0",
-    "url-loader": "^3.0.0",
+    "url-loader": "^4.0.0",
-    "webpack": "^4.42.0",
+    "webpack": "^4.42.1",
     "webpack-cli": "^3.3.11",
     "webpack-dev-middleware": "^3.7.2"
   },

common.mk

@@ -22,12 +22,9 @@ export JEST_ENV
 # $(1) is the source of the client assets
 # $(2) is the destination
 define copy_client_assets
-	mkdir -p $(2)/common/web/static/img
+	mkdir -p $(2)/common/web/static/assets
-	mkdir -p $(2)/common/web/static/js
 	mkdir -p $(2)/common/web/templates/
 	cp $(1)/index.html $(2)/common/web/templates/
 	cp -r $(1)/static $(2)/common/web/
-	cp $(1)/favicon.png $(2)/common/web/static/img
-	cp $(1)/service-worker.js $(2)/common/web/static/js/
 endef
 

server/app/app.py

@@ -1,9 +1,8 @@
-import os
 import datetime
 import logging
 
 from flask import Flask, redirect, current_app, make_response, render_template, abort
-from flask import Blueprint, request, send_from_directory
+from flask import Blueprint, request
 from flask_restful import Api, Resource
 
 from http import HTTPStatus
@@ -76,13 +75,6 @@ def dataset_index(dataset=None):
         )
 
 
-# TODO: remove the top-level /favicon route once the build problem with index.html is resolved
-@webbp.route("/favicon.png", methods=["GET"])
-@webbp.route("/static/img/favicon.png", methods=["GET"])
-def favicon():
-    return send_from_directory(os.path.join(webbp.root_path, "static/img/"), "favicon.png")
-
-
 @webbp.route("/health", methods=["GET"])
 @cache_control_always(no_store=True)
 def health():

server/test/test_api.py

@@ -237,7 +237,7 @@ class EndPoints(object):
 
     def test_static(self):
         endpoint = "static"
-        file = "js/service-worker.js"
+        file = "assets/favicon.ico"
         url = f"{self.LOCAL_URL}{endpoint}/{file}"
         result = self.session.get(url)
         self.assertEqual(result.status_code, HTTPStatus.OK)