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

* cleanup build and module contents * lint * update chalk * more cleanup * fix unit test
2026-09-15 12:47:56 +08:00 · 2020-04-06 20:04:06 -06:00
parent 4efabf5231
commit 6193ae4997
9 changed files with 4509 additions and 935 deletions
--- a/2
+++ b/2
@@ -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)
--- a/client/configuration/webpack/webpack.config.dev.js
+++ b/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)(\?.*)?$/,
-        include: nodeModules,
+        test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2|otf)$/i,
        loader: "file-loader",
-        query: { name: "static/media/[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]" }
+        include: [nodeModules, fonts],
+        query: { name: "static/assets/[name].[ext]" }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
-      template: path.resolve("index.html"),
-      favicon: path.resolve("favicon.png")
+      template: path.resolve("index.html")
+    }),
+    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({
--- a/client/configuration/webpack/webpack.config.prod.js
+++ b/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)(\?.*)?$/,
-        include: nodeModules,
+        test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2|otf)$/i,
        loader: "file-loader",
-        query: { name: "static/media/[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].[hash:8].[ext]" }
+        include: [nodeModules, fonts],
+        query: { name: "static/assets/[name]-[contenthash].[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 MiniCssExtractPlugin({
-      filename: "static/css/[name].[contenthash:8].css"
+    new CleanWebpackPlugin({
+      verbose: true,
+      protectWebpackAssets: false,
+      cleanAfterEveryBuildPatterns: ["main.js", "main.css"]
    }),
-    new SWPrecacheWebpackPlugin({
-      cacheId: "cellxgene",
-      filename: "service-worker.js"
-    })
+    new FaviconsWebpackPlugin({
+      logo: "./favicon.png",
+      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,
--- a/client/index_template.html
+++ b/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">
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/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-dom": "^16.13.0",
+    "react": "^16.13.1",
+    "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-transform-react-constant-elements": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.8.3",
-    "@babel/preset-env": "^7.8.7",
-    "@babel/preset-react": "^7.8.3",
-    "@babel/register": "^7.8.6",
-    "@babel/runtime": "^7.8.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.9.0",
+    "@babel/plugin-transform-react-constant-elements": "^7.9.0",
+    "@babel/plugin-transform-runtime": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-react": "^7.9.4",
+    "@babel/register": "^7.9.0",
+    "@babel/runtime": "^7.9.2",
    "babel-eslint": "^10.1.0",
-    "babel-jest": "^25.1.0",
-    "babel-loader": "^8.0.6",
-    "babel-preset-modern-browsers": "^14.1.1",
-    "chalk": "^3.0.0",
+    "babel-jest": "^25.2.6",
+    "babel-loader": "^8.1.0",
+    "babel-preset-modern-browsers": "^14.2.1",
+    "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-loader": "^3.0.3",
+    "eslint-config-prettier": "^6.10.1",
+    "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",
-    "html-webpack-inline-source-plugin": "0.0.10",
-    "html-webpack-plugin": "^3.2.0",
-    "jest": "^25.1.0",
+    "favicons-webpack-plugin": "^3.0.1",
+    "file-loader": "^6.0.0",
+    "html-webpack-inline-source-plugin": "^1.0.0-beta.2",
+    "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",
-    "webpack": "^4.42.0",
+    "url-loader": "^4.0.0",
+    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-middleware": "^3.7.2"
  },
--- a/common.mk
+++ b/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/js
+	mkdir -p $(2)/common/web/static/assets
 	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

--- a/server/app/app.py
+++ b/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():
--- a/server/test/test_api.py
+++ b/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)