From 753953ad3eff19c5535689422adf3f2048d0499a Mon Sep 17 00:00:00 2001 From: SleeplessOne1917 Date: Thu, 29 Jun 2023 09:25:08 -0400 Subject: [PATCH] Make hash docker agnostic --- Dockerfile | 2 +- dev.dockerfile | 3 +- package.json | 4 +- src/server/index.tsx | 7 +- src/server/utils/create-ssr-html.tsx | 9 +- src/shared/components/common/icon.tsx | 3 +- .../components/person/person-listing.tsx | 4 +- src/shared/config.ts | 6 +- src/shared/version.ts | 1 - webpack.config.js | 108 +++++++++--------- 10 files changed, 75 insertions(+), 72 deletions(-) diff --git a/Dockerfile b/Dockerfile index 66a0adda..2b36581d 100644 --- a/Dockerfile +++ b/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 diff --git a/dev.dockerfile b/dev.dockerfile index e446ba80..881d9bc3 100644 --- a/dev.dockerfile +++ b/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 diff --git a/package.json b/package.json index e5c1fa70..fcac4e19 100644 --- a/package.json +++ b/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}\"", diff --git a/src/server/index.tsx b/src/server/index.tsx index e9c907f7..c6af347a 100644 --- a/src/server/index.tsx +++ b/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}`); }); diff --git a/src/server/utils/create-ssr-html.tsx b/src/server/utils/create-ssr-html.tsx index 0a4ec22f..014d3253 100644 --- a/src/server/utils/create-ssr-html.tsx +++ b/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( - + ${helmet.link.toString() || fallbackTheme} @@ -103,7 +104,9 @@ export async function createSsrHtml(
${root}
- + `; diff --git a/src/shared/components/common/icon.tsx b/src/shared/components/common/icon.tsx index 10f59c7b..4102e7b2 100644 --- a/src/shared/components/common/icon.tsx +++ b/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 { })} >
{this.props.icon} diff --git a/src/shared/components/person/person-listing.tsx b/src/shared/components/person/person-listing.tsx index 169a93f1..1d88e380 100644 --- a/src/shared/components/person/person-listing.tsx +++ b/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 { showAvatars() && ( diff --git a/src/shared/config.ts b/src/shared/config.ts index cb0f8e1e..3687e60e 100644 --- a/src/shared/config.ts +++ b/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"; diff --git a/src/shared/version.ts b/src/shared/version.ts index a799956b..c1dba35e 100644 --- a/src/shared/version.ts +++ b/src/shared/version.ts @@ -1,2 +1 @@ export const VERSION = "unknown version"; -export const COMMIT_HASH = "unknown hash"; diff --git a/webpack.config.js b/webpack.config.js index 0b03f6d9..8acd71a6 100644 --- a/webpack.config.js +++ b/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],