Use git hash to break cache

.prettierignore

@@ -2,3 +2,4 @@ src/shared/translations
 lemmy-translations
 src/assets/css/themes/*.css
 stats.json
+dist

Dockerfile

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

dev.dockerfile

@@ -18,11 +18,13 @@ 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';" > "src/shared/version.ts"
+RUN echo "export const VERSION = 'dev'; export const COMMIT_HASH = '$(git rev-parse HEAD)';" > "src/shared/version.ts"
 
 RUN yarn --prefer-offline
 RUN yarn build:dev

src/server/index.tsx

@@ -2,6 +2,7 @@ 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";
@@ -18,7 +19,7 @@ const [hostname, port] = process.env["LEMMY_UI_HOST"]
 
 server.use(express.json());
 server.use(express.urlencoded({ extended: false }));
-server.use("/static", express.static(path.resolve("./dist")));
+server.use(`/static-${COMMIT_HASH}`, express.static(path.resolve("./dist")));
 server.use(setCacheControl);
 
 if (!process.env["LEMMY_UI_DISABLE_CSP"] && !process.env["LEMMY_UI_DEBUG"]) {

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

@@ -4,6 +4,7 @@ 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";
 
@@ -87,7 +88,7 @@ export async function createSsrHtml(
     <link rel="apple-touch-startup-image" href=${appleTouchIcon} />
   
     <!-- Styles -->
-    <link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
+    <link rel="stylesheet" type="text/css" href="/static-${COMMIT_HASH}/styles/styles.css" />
   
     <!-- Current theme and more -->
     ${helmet.link.toString() || fallbackTheme}
@@ -102,7 +103,7 @@ export async function createSsrHtml(
       </noscript>
   
       <div id='root'>${root}</div>
-      <script defer src='/static/js/client.js'></script>
+      <script defer src='/static-${COMMIT_HASH}/js/client.js'></script>
     </body>
   </html>
   `;

src/shared/components/common/icon.tsx

@@ -1,5 +1,6 @@
 import classNames from "classnames";
 import { Component } from "inferno";
+import { COMMIT_HASH } from "../../../shared/version";
 import { I18NextService } from "../../services";
 
 interface IconProps {
@@ -23,7 +24,7 @@ export class Icon extends Component<IconProps, any> {
         })}
       >
         <use
-          xlinkHref={`/static/assets/symbols.svg#icon-${this.props.icon}`}
+          xlinkHref={`/static-${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,6 +4,7 @@ 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";
@@ -88,7 +89,9 @@ export class PersonListing extends Component<PersonListingProps, any> {
           !this.props.person.banned &&
           showAvatars() && (
             <PictrsImage
-              src={avatar ?? "/static/assets/icons/icon-96x96.png"}
+              src={
+                avatar ?? `/static-${COMMIT_HASH}/assets/icons/icon-96x96.png`
+              }
               icon
             />
           )}

src/shared/config.ts

@@ -1,5 +1,7 @@
-export const favIconUrl = "/static/assets/icons/favicon.svg";
-export const favIconPngUrl = "/static/assets/icons/apple-touch-icon.png";
+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 repoUrl = "https://github.com/LemmyNet";
 export const joinLemmyUrl = "https://join-lemmy.org";

src/shared/version.ts

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

webpack.config.js

@@ -14,6 +14,11 @@ 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",
@@ -96,6 +101,7 @@ const createClientConfig = (_env, mode) => {
     entry: "./src/client/index.tsx",
     output: {
       filename: "js/client.js",
+      publicPath: `/static-${commitHash}`,
     },
     plugins: [
       ...base.plugins,
@@ -103,7 +109,7 @@ const createClientConfig = (_env, mode) => {
         enableInDevelopment: mode !== "development", // this may seem counterintuitive, but it is correct
         workbox: {
           modifyURLPrefix: {
-            "/": "/static/",
+            "/": `/static-${commitHash}/`,
           },
           cacheId: "lemmy",
           include: [/(assets|styles)\/.+\..+|client\.js$/g],