Create a Docker Image for Web (#4533)

Author: Podginator

.github/workflows/build-self-host-docker-images.yml

@@ -34,6 +34,16 @@ jobs:
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
 
+      - name: Build and push web
+        uses: docker/build-push-action@v6
+        with:
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ghcr.io/omnivore-app/sh-web:latest,ghcr.io/omnivore-app/sh-web:${{ github.sha }}
+          file: packages/web/Dockerfile-self
+          cache-from: type=registry,ref=ghcr.io/omnivore-app/sh-web:${{ github.sha }}
+          cache-to: type=registry,ref=ghcr.io/omnivore-app/sh-web:${{ github.sha }},mode=max
+
       - name: Build and push image-proxy
         uses: docker/build-push-action@v6
         with:

packages/web/Dockerfile-self

@@ -3,14 +3,6 @@
 
 FROM node:22.12-alpine as builder
 ENV NODE_OPTIONS=--max-old-space-size=8192
-ARG APP_ENV
-ARG BASE_URL
-ARG SERVER_BASE_URL
-ARG HIGHLIGHTS_BASE_URL
-ENV NEXT_PUBLIC_APP_ENV=$APP_ENV
-ENV NEXT_PUBLIC_BASE_URL=$BASE_URL
-ENV NEXT_PUBLIC_SERVER_BASE_URL=$SERVER_BASE_URL
-ENV NEXT_PUBLIC_HIGHLIGHTS_BASE_URL=$HIGHLIGHTS_BASE_URL
 
 
 RUN apk add g++ make python3 py3-setuptools
@@ -50,4 +42,6 @@ COPY --from=builder /app/node_modules /app/node_modules
 COPY --from=builder /app/package.json /app/package.json
 
 EXPOSE 8080
-CMD ["yarn", "workspace", "@omnivore/web", "start"]
+COPY ./packages/web/env.sh /app/packages/web/env.sh
+RUN chmod +x /app/packages/web/env.sh
+ENTRYPOINT ["/app/packages/web/env.sh"]

packages/web/env.sh

@@ -0,0 +1,21 @@
+#!/bin/sh
+
+if [ -z "$SERVER_BASE_URL" ]; then
+    echo "Error: SERVER_BASE_URL environment variable is not set."
+    exit 1
+fi
+
+file_contents=$(cat /app/packages/web/public/env.js)
+new_contents=${file_contents//\{\{SERVER_BASE_URL\}\}/$SERVER_BASE_URL}
+echo "$new_contents" > /app/packages/web/public/env.js
+
+if [ -z "$BASE_URL" ]; then
+    echo "Error: BASE_URL environment variable is not set."
+    exit 1
+fi
+
+file_contents=$(cat /app/packages/web/public/env.js)
+new_contents=${file_contents//\{\{BASE_URL\}\}/$BASE_URL}
+echo "$new_contents" > /app/packages/web/public/env.js
+
+yarn workspace @omnivore/web start

packages/web/lib/appConfig.ts

@@ -30,20 +30,26 @@ const baseURLRecords: BaseURLRecords = {
 
 function serverBaseURL(env: AppEnvironment): string {
   const value = baseURLRecords[appEnv].serverBaseURL
-  if (value.length == 0) {
-    throw new Error(
-      `Couldn't find environment variable for server base url in ${env} environment`
+  if (value.length == 0 && global.window) {
+    const windowEnv = (window as any).omnivoreEnv
+    console.warn(
+      `Couldn't find environment variable for server base url in ${env} environment, using ${windowEnv.SERVER_BASE_URL}`
     )
+
+    return windowEnv.SERVER_BASE_URL ?? ''
   }
   return value
 }
 
 function webURL(env: AppEnvironment): string {
   const value = baseURLRecords[appEnv].webBaseURL
-  if (value.length == 0) {
-    throw new Error(
-      `Couldn't find environment variable for web base url in ${env} environment`
+  if (value.length == 0 && global.window) {
+    const windowEnv = (window as any).omnivoreEnv
+    console.warn(
+      `Couldn't find environment variable for base url in ${env} environment, using ${windowEnv.BASE_URL}`
     )
+
+    return windowEnv.BASE_URL ?? ''
   }
   return value
 }

packages/web/pages/_document.tsx

@@ -3,6 +3,7 @@
 import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
 import { getCssText, globalStyles } from '../components/tokens/stitches.config'
 import { Toaster } from 'react-hot-toast'
+import Script from 'next/script'
 
 export default class Document extends NextDocument {
   render() {
@@ -18,6 +19,7 @@ export default class Document extends NextDocument {
           <link rel="manifest" href="/manifest.webmanifest" />
           <script async src="/static/scripts/intercom.js" />
           <script async src="/static/scripts/inject-sw.js" />
+          <Script strategy={"beforeInteractive"} src={"/env.js"} />
 
           {/* prefetch (not preload) fonts that will be used by the reader */}
           <link rel="prefetch" href="/static/fonts/Lora/Lora-Regular.ttf" />

packages/web/public/env.js

@@ -0,0 +1,4 @@
+window.omnivoreEnv = {
+  SERVER_BASE_URL: "{{SERVER_BASE_URL}}",
+  BASE_URL: "{{BASE_URL}}"
+}

self-hosting/docker-compose/docker-compose.yml

@@ -54,15 +54,7 @@ services:
         condition: service_started
 
   web:
-    build:
-      context: ../../
-      dockerfile: ./packages/web/Dockerfile-self
-      args:
-        - APP_ENV=prod
-        - BASE_URL=http://localhost:3000
-        - SERVER_BASE_URL=http://localhost:4000
-        - HIGHLIGHTS_BASE_URL=http://localhost:3000
-        - USE_NATIVE_PDF=true
+    image: "ghcr.io/omnivore-app/sh-web:latest"
     container_name: "omnivore-web"
     ports:
       - "3000:8080"