webpack build source branding assets directly from the common module

Signed-off-by: Scott J Dickerson <[email protected]>

client/config/webpack.common.ts

@@ -5,9 +5,12 @@ import Dotenv from "dotenv-webpack";
 import { TsconfigPathsPlugin } from "tsconfig-paths-webpack-plugin";
 import MonacoWebpackPlugin from "monaco-editor-webpack-plugin";
 
+import { brandingAssetPath } from "@konveyor-ui/common";
 import { LANGUAGES_BY_FILE_EXTENSION } from "./monacoConstants";
 
 const pathTo = (relativePath: string) => path.resolve(__dirname, relativePath);
+const brandingPath = brandingAssetPath();
+const manifestPath = path.resolve(brandingPath, "manifest.json");
 
 const BG_IMAGES_DIRNAME = "images";
 
@@ -178,17 +181,20 @@ const config: Configuration = {
       patterns: [
         {
           from: pathTo("../public/locales"),
-          to: pathTo("../dist/locales"),
+          to: "./locales/",
         },
         {
           from: pathTo("../public/templates"),
-          to: pathTo("../dist/templates"),
+          to: "./templates/",
         },
         {
-          from: pathTo("../public/manifest.json"), // TODO: needs to come from branding
-          to: pathTo("../dist/manifest.json"),
+          from: manifestPath,
+          to: ".",
+        },
+        {
+          from: brandingPath,
+          to: "./branding/",
         },
-        // TODO: Branding path to copy to dist?
       ],
     }),
     new MonacoWebpackPlugin({

client/config/webpack.dev.ts

@@ -2,7 +2,6 @@ import path from "path";
 import { mergeWithRules } from "webpack-merge";
 import type { Configuration as WebpackConfiguration } from "webpack";
 import type { Configuration as DevServerConfiguration } from "webpack-dev-server";
-
 import CopyPlugin from "copy-webpack-plugin";
 import HtmlWebpackPlugin from "html-webpack-plugin";
 import ReactRefreshTypeScript from "react-refresh-typescript";
@@ -14,14 +13,14 @@ import {
   KONVEYOR_ENV,
   SERVER_ENV_KEYS,
   proxyMap,
+  brandingStrings,
+  brandingAssetPath,
 } from "@konveyor-ui/common";
 import { stylePaths } from "./stylePaths";
 import commonWebpackConfiguration from "./webpack.common";
 
 const pathTo = (relativePath: string) => path.resolve(__dirname, relativePath);
-
-const brandPath = ""; // TODO: Find the branding path for the favicon.ico
-const brandStrings = {}; // TODO: Read the strings.json file and make available!
+const faviconPath = path.resolve(brandingAssetPath(), "favicon.ico");
 
 interface Configuration extends WebpackConfiguration {
   devServer?: DevServerConfiguration;
@@ -101,9 +100,9 @@ const config: Configuration = mergeWithRules({
       template: pathTo("../public/index.html.ejs"),
       templateParameters: {
         _env: encodeEnv(KONVEYOR_ENV, SERVER_ENV_KEYS),
-        branding: brandStrings,
+        branding: brandingStrings,
       },
-      favicon: `${brandPath}/favicon.ico`, // TODO: Branding path
+      favicon: faviconPath,
       minify: {
         collapseWhitespace: false,
         keepClosingSlash: true,

client/config/webpack.prod.ts

@@ -5,12 +5,12 @@ import MiniCssExtractPlugin from "mini-css-extract-plugin";
 import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
 import HtmlWebpackPlugin from "html-webpack-plugin";
 
+import { brandingAssetPath } from "@konveyor-ui/common";
 import { stylePaths } from "./stylePaths";
 import commonWebpackConfiguration from "./webpack.common";
 
 const pathTo = (relativePath: string) => path.resolve(__dirname, relativePath);
-
-const brandPath = ""; // TODO: Find the branding path for the favicon.ico
+const faviconPath = path.resolve(brandingAssetPath(), "favicon.ico");
 
 const config = merge<Configuration>(commonWebpackConfiguration, {
   mode: "production",
@@ -57,7 +57,7 @@ const config = merge<Configuration>(commonWebpackConfiguration, {
     new HtmlWebpackPlugin({
       filename: "index.html.ejs",
       template: `!!raw-loader!${pathTo("../public/index.html.ejs")}`,
-      favicon: `${brandPath}/favicon.ico`, // TODO: Branding path
+      favicon: faviconPath,
       minify: {
         collapseWhitespace: false,
         keepClosingSlash: true,

common/package.json

@@ -10,7 +10,8 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "types": "./dist",
   "main": "./dist/index.cjs",

common/src/branding.ts

@@ -38,3 +38,10 @@ import * as stringsJson from "@branding/strings.json";
 
 export const brandingStrings =
   stringsJson.default as unknown as BrandingStrings;
+
+/**
+ * Return the `node_modules/` resolved path for the branding assets.
+ */
+export const brandingAssetPath = () =>
+  require.resolve("@konveyor-ui/common/package.json").replace(/(.)\/$/, "$1") +
+  "/dist/branding";