Make hash docker agnostic

Dockerfile

@@ -24,7 +24,7 @@ COPY src src
 COPY .git .git
 
 # Set UI version 
-RUN echo "export const VERSION = '$(git describe --tag)'; export const COMMIT_HASH = '$(git rev-parse HEAD)';" > "src/shared/version.ts"
+RUN echo "export const VERSION = '$(git describe --tag)';" > "src/shared/version.ts"
 
 RUN yarn --production --prefer-offline
 RUN yarn build:prod

dev.dockerfile

@@ -18,13 +18,12 @@ COPY generate_translations.js \
   .babelrc \
   ./
 
-
 COPY lemmy-translations lemmy-translations
 COPY src src
 COPY .git .git
 
 # Set UI version 
-RUN echo "export const VERSION = 'dev'; export const COMMIT_HASH = '$(git rev-parse HEAD)';" > "src/shared/version.ts"
+RUN echo "export const VERSION = 'dev';" > "src/shared/version.ts"
 
 RUN yarn --prefer-offline
 RUN yarn build:dev

package.json

@@ -8,9 +8,9 @@
   "scripts": {
     "analyze": "webpack --mode=none",
     "prebuild:dev": "yarn clean && node generate_translations.js",
-    "build:dev": "webpack --mode=development",
+    "build:dev": "webpack --env COMMIT_HASH=$(git rev-parse --short HEAD) --mode=development",
     "prebuild:prod": "yarn clean && node generate_translations.js",
-    "build:prod": "webpack --mode=production",
+    "build:prod": "webpack --env COMMIT_HASH=$(git rev-parse --short HEAD) --mode=production",
     "clean": "yarn run rimraf dist",
     "dev": "yarn build:dev --watch",
     "lint": "yarn translations:generate && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx \"src/**\" && prettier --check \"src/**/*.{ts,tsx,js,css,scss}\"",

src/server/index.tsx

@@ -2,7 +2,6 @@ import { setupDateFns } from "@utils/app";
 import express from "express";
 import path from "path";
 import process from "process";
-import { COMMIT_HASH } from "../shared/version";
 import CatchAllHandler from "./handlers/catch-all-handler";
 import ManifestHandler from "./handlers/manifest-handler";
 import RobotsHandler from "./handlers/robots-handler";
@@ -19,7 +18,10 @@ const [hostname, port] = process.env["LEMMY_UI_HOST"]
 
 server.use(express.json());
 server.use(express.urlencoded({ extended: false }));
-server.use(`/static/${COMMIT_HASH}`, express.static(path.resolve("./dist")));
+server.use(
+  `/static/${process.env.COMMIT_HASH}`,
+  express.static(path.resolve("./dist"))
+);
 server.use(setCacheControl);
 
 if (!process.env["LEMMY_UI_DISABLE_CSP"] && !process.env["LEMMY_UI_DEBUG"]) {
@@ -34,6 +36,7 @@ server.get("/css/themelist", ThemesListHandler);
 server.get("/*", CatchAllHandler);
 
 server.listen(Number(port), hostname, () => {
+  console.log(`HASH: ${process.env.COMMIT_HASH}`);
   setupDateFns();
   console.log(`http://${hostname}:${port}`);
 });

src/server/utils/create-ssr-html.tsx

@@ -4,7 +4,6 @@ import serialize from "serialize-javascript";
 import sharp from "sharp";
 import { favIconPngUrl, favIconUrl } from "../../shared/config";
 import { ILemmyConfig, IsoDataOptionalSite } from "../../shared/interfaces";
-import { COMMIT_HASH } from "../../shared/version";
 import { buildThemeList } from "./build-themes-list";
 import { fetchIconPng } from "./fetch-icon-png";
 
@@ -88,7 +87,9 @@ export async function createSsrHtml(
     <link rel="apple-touch-startup-image" href=${appleTouchIcon} />
   
     <!-- Styles -->
-    <link rel="stylesheet" type="text/css" href="/static/${COMMIT_HASH}/styles/styles.css" />
+    <link rel="stylesheet" type="text/css" href="/static/${
+      process.env.COMMIT_HASH
+    }/styles/styles.css" />
   
     <!-- Current theme and more -->
     ${helmet.link.toString() || fallbackTheme}
@@ -103,7 +104,9 @@ export async function createSsrHtml(
       </noscript>
   
       <div id='root'>${root}</div>
-      <script defer src='/static/${COMMIT_HASH}/js/client.js'></script>
+      <script defer src='/static/${
+        process.env.COMMIT_HASH
+      }/js/client.js'></script>
     </body>
   </html>
   `;

src/shared/components/common/icon.tsx

@@ -1,6 +1,5 @@
 import classNames from "classnames";
 import { Component } from "inferno";
-import { COMMIT_HASH } from "../../../shared/version";
 import { I18NextService } from "../../services";
 
 interface IconProps {
@@ -24,7 +23,7 @@ export class Icon extends Component<IconProps, any> {
         })}
       >
         <use
-          xlinkHref={`/static/${COMMIT_HASH}/assets/symbols.svg#icon-${this.props.icon}`}
+          xlinkHref={`/static/${process.env.COMMIT_HASH}/assets/symbols.svg#icon-${this.props.icon}`}
         ></use>
         <div className="visually-hidden">
           <title>{this.props.icon}</title>

src/shared/components/person/person-listing.tsx

@@ -4,7 +4,6 @@ import classNames from "classnames";
 import { Component } from "inferno";
 import { Link } from "inferno-router";
 import { Person } from "lemmy-js-client";
-import { COMMIT_HASH } from "../../../shared/version";
 import { relTags } from "../../config";
 import { PictrsImage } from "../common/pictrs-image";
 import { CakeDay } from "./cake-day";
@@ -90,7 +89,8 @@ export class PersonListing extends Component<PersonListingProps, any> {
           showAvatars() && (
             <PictrsImage
               src={
-                avatar ?? `/static/${COMMIT_HASH}/assets/icons/icon-96x96.png`
+                avatar ??
+                `/static/${process.env.COMMIT_HASH}/assets/icons/icon-96x96.png`
               }
               icon
             />

src/shared/config.ts

@@ -1,7 +1,5 @@
-import { COMMIT_HASH } from "./version";
-
-export const favIconUrl = `/static/${COMMIT_HASH}/assets/icons/favicon.svg`;
-export const favIconPngUrl = `/static/${COMMIT_HASH}/assets/icons/apple-touch-icon.png`;
+export const favIconUrl = `/static/${process.env.COMMIT_HASH}/assets/icons/favicon.svg`;
+export const favIconPngUrl = `/static/${process.env.COMMIT_HASH}/assets/icons/apple-touch-icon.png`;
 
 export const repoUrl = "https://github.com/LemmyNet";
 export const joinLemmyUrl = "https://join-lemmy.org";

src/shared/version.ts

@@ -1,2 +1 @@
 export const VERSION = "unknown version";
-export const COMMIT_HASH = "unknown hash";

webpack.config.js

@@ -14,61 +14,62 @@ const banner = `
   @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
   `;
 
-const commitHash = require("child_process")
-  .execSync("git rev-parse HEAD")
-  .toString()
-  .trim();
-
-const base = {
-  output: {
-    filename: "js/server.js",
-    publicPath: "/",
-    hashFunction: "xxhash64",
-  },
-  resolve: {
-    extensions: [".js", ".jsx", ".ts", ".tsx"],
-    alias: {
-      "@": path.resolve(__dirname, "src/"),
-      "@utils": path.resolve(__dirname, "src/shared/utils/"),
+function getBase(env) {
+  return {
+    output: {
+      filename: "js/server.js",
+      publicPath: "/",
+      hashFunction: "xxhash64",
     },
-  },
-  performance: {
-    hints: false,
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(scss|css)$/i,
-        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+    resolve: {
+      extensions: [".js", ".jsx", ".ts", ".tsx"],
+      alias: {
+        "@": path.resolve(__dirname, "src/"),
+        "@utils": path.resolve(__dirname, "src/shared/utils/"),
       },
-      {
-        test: /\.(js|jsx|tsx|ts)$/, // All ts and tsx files will be process by
-        exclude: /node_modules/, // ignore node_modules
-        loader: "babel-loader",
-      },
-      // Due to some weird babel issue: https://github.com/webpack/webpack/issues/11467
-      {
-        test: /\.m?js/,
-        resolve: {
-          fullySpecified: false,
+    },
+    performance: {
+      hints: false,
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(scss|css)$/i,
+          use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
         },
-      },
+        {
+          test: /\.(js|jsx|tsx|ts)$/, // All ts and tsx files will be process by
+          exclude: /node_modules/, // ignore node_modules
+          loader: "babel-loader",
+        },
+        // Due to some weird babel issue: https://github.com/webpack/webpack/issues/11467
+        {
+          test: /\.m?js/,
+          resolve: {
+            fullySpecified: false,
+          },
+        },
+      ],
+    },
+    plugins: [
+      new webpack.DefinePlugin({
+        "process.env.COMMIT_HASH": `"${env.COMMIT_HASH}"`,
+      }),
+      new MiniCssExtractPlugin({
+        filename: "styles/styles.css",
+      }),
+      new CopyPlugin({
+        patterns: [{ from: "./src/assets", to: "./assets" }],
+      }),
+      new webpack.BannerPlugin({
+        banner,
+      }),
     ],
-  },
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: "styles/styles.css",
-    }),
-    new CopyPlugin({
-      patterns: [{ from: "./src/assets", to: "./assets" }],
-    }),
-    new webpack.BannerPlugin({
-      banner,
-    }),
-  ],
-};
+  };
+}
 
-const createServerConfig = (_env, mode) => {
+const createServerConfig = (env, mode) => {
+  const base = getBase(env);
   const config = merge({}, base, {
     mode,
     entry: "./src/server/index.tsx",
@@ -95,13 +96,14 @@ const createServerConfig = (_env, mode) => {
   return config;
 };
 
-const createClientConfig = (_env, mode) => {
+const createClientConfig = (env, mode) => {
+  const base = getBase(env);
   const config = merge({}, base, {
     mode,
     entry: "./src/client/index.tsx",
     output: {
       filename: "js/client.js",
-      publicPath: `/static/${commitHash}`,
+      publicPath: `/static/${env.COMMIT_HASH}`,
     },
     plugins: [
       ...base.plugins,
@@ -109,7 +111,7 @@ const createClientConfig = (_env, mode) => {
         enableInDevelopment: mode !== "development", // this may seem counterintuitive, but it is correct
         workbox: {
           modifyURLPrefix: {
-            "/": `/static/${commitHash}/`,
+            "/": `/static/${env.COMMIT_HASH}/`,
           },
           cacheId: "lemmy",
           include: [/(assets|styles)\/.+\..+|client\.js$/g],