thuang-fix-static-asset-font (#1791)

This seems to fix the font URL path, at least locally for both `:3000` and `:5005`

<img width="1296" alt="Screen Shot 2020-08-24 at 4 01 07 PM" src="https://user-images.githubusercontent.com/6309723/91106044-8a338780-e626-11ea-885f-e5c268f3ecf0.png">

<img width="1377" alt="Screen Shot 2020-08-24 at 4 01 28 PM" src="https://user-images.githubusercontent.com/6309723/91106047-8dc70e80-e626-11ea-95b0-62e47cc6303f.png">

client/configuration/eslint/eslint.js

@@ -64,6 +64,12 @@ module.exports = {
       "LabeledStatement",
       "WithStatement",
     ],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        devDependencies: true,
+      },
+    ],
   },
   overrides: [
     {

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

@@ -31,7 +31,11 @@ const devConfig = {
         test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2|otf)$/i,
         loader: "file-loader",
         include: [nodeModules, fonts],
-        query: { name: "static/assets/[name].[ext]" },
+        query: {
+          name: "static/assets/[name].[ext]",
+          // (thuang): This is needed to make sure @font url path is '/static/assets/'
+          publicPath: "/",
+        },
       },
     ],
   },

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

@@ -45,7 +45,11 @@ const prodConfig = {
         test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2|otf)$/i,
         loader: "file-loader",
         include: [nodeModules, fonts],
-        query: { name: "static/assets/[name]-[contenthash].[ext]" },
+        query: {
+          name: "static/assets/[name]-[contenthash].[ext]",
+          // (thuang): This is needed to make sure @font url path is '../static/assets/'
+          publicPath: "static/",
+        },
       },
     ],
   },

client/server/development.js

@@ -1,20 +1,19 @@
-/* eslint-disable */
+const path = require("path");
-// jshint esversion: 6
+const historyApiFallback = require("connect-history-api-fallback");
-var path = require("path");
+const chalk = require("chalk");
-var historyApiFallback = require("connect-history-api-fallback");
+const express = require("express");
-var chalk = require("chalk");
+const favicon = require("serve-favicon");
-var express = require("express");
+const webpack = require("webpack");
-var favicon = require("serve-favicon");
+const devMiddleware = require("webpack-dev-middleware");
-var webpack = require("webpack");
+const config = require("../configuration/webpack/webpack.config.dev");
-var config = require("../configuration/webpack/webpack.config.dev");
+const utils = require("./utils");
-var utils = require("./utils");
 
 process.env.NODE_ENV = "development";
 
 const CLIENT_PORT = process.env.CXG_CLIENT_PORT;
 
 // Set up compiler
-var compiler = webpack(config);
+const compiler = webpack(config);
 
 compiler.plugin("invalid", () => {
   utils.clearConsole();
@@ -26,12 +25,12 @@ compiler.plugin("done", (stats) => {
 });
 
 // Launch server
-var app = express();
+const app = express();
 
 app.use(historyApiFallback({ verbose: false }));
 
 app.use(
-  require("webpack-dev-middleware")(compiler, {
+  devMiddleware(compiler, {
     logLevel: "warn",
     publicPath: config.output.publicPath,
   })