Feat: Docker Compose example

compose/.env.example

@@ -0,0 +1,12 @@
+FQDN=localhost.localdomain
+NEXT_PUBLIC_API_URL=http://api.${FQDN}:3000
+FRONTEND_URL=http://${FQDN}:3001
+
+POSTGRES_HOST=database
+POSTGRES_USER=localdomain-localhost
+POSTGRES_DB=${POSTGRES_USER}
+POSTGRES_PASSWORD=<openssl rand -hex 32>
+
+DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:5432/${POSTGRES_DB}
+
+CRON_KEY=<openssl rand -hex 32>

compose/.gitignore

@@ -0,0 +1 @@
+.env

compose/README.md

@@ -0,0 +1,32 @@
+# Compose
+
+This is an example development environment with Docker Compose.
+
+First copy the example environment and adapt the values to your needs.
+
+```sh
+cp .env.example .env
+```
+
+You can then build the application:
+
+```sh
+docker compose build api frontend
+```
+
+To start the application, pull preexisting images and run the containers.
+
+```sh
+docker compose pull
+docker compose up -d
+```
+
+This makes the application available at http://localhost.localdomain:3001/.
+
+The API will be listening on http://api.localhost.localdomain:3000.
+
+This configuration is prepared to be used for a production instance behind a Traefik reverse proxy.
+
+1. Remove the `ports:` declarations in `compose.yml`.
+2. Uncomment the `web` network and the `labels:`.
+3. Uncomment the `CRON_KEY` variable.

compose/compose.yml

@@ -0,0 +1,77 @@
+volumes:
+  postgres:
+
+networks:
+  internal:
+#  web:
+#    external: true
+
+services:
+  frontend:
+    image: ghcr.io/drinkablebreeze/starbestfit-frontend
+    ports:
+      - "3001:3000"
+    dns: "127.0.0.11"
+    dns_search: "*"
+    build:
+      context: ../frontend/
+      args:
+        NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL}
+        FRONTEND_URL: ${FRONTEND_URL}
+        #NEXT_PUBLIC_GOOGLE_CLIENT_ID
+        #NEXT_PUBLIC_GOOGLE_API_KEY
+    environment:
+      - NEXT_PUBLIC_API_URL
+      - FRONTEND_URL
+      - NODE_ENV=production
+      #- NEXT_PUBLIC_GOOGLE_CLIENT_ID
+      #- NEXT_PUBLIC_GOOGLE_API_KEY
+    networks:
+      - internal
+#      - web
+#    labels:
+#      traefik.enable: true
+#      traefik.http.routers.localdomain-localhost.rule: Host(`${FQDN}`)
+#      traefik.http.routers.localdomain-localhost.tls: true
+#      traefik.http.routers.localdomain-localhost.tls.certresolver: letsencrypt
+
+  api:
+    image: ghcr.io/drinkablebreeze/starbestfit-api
+    hostname: api.${FQDN}
+    ports:
+      - "3000:3000"
+    build:
+      context: ../api/
+    init: true
+    depends_on:
+      database:
+        condition: service_healthy
+    environment:
+      - DATABASE_URL
+      - FRONTEND_URL
+#      - CRON_KEY
+    networks:
+      - internal
+#      - web
+#    labels:
+#      traefik.enable: true
+#      traefik.http.routers.localdomain-localhost-api.rule: Host(`api.${FQDN}`)
+#      traefik.http.routers.localdomain-localhost-api.tls: true
+#      traefik.http.routers.localdomain-localhost-api.tls.certresolver: letsencrypt
+
+  database:
+    image: postgres:15-alpine
+    environment:
+      - POSTGRES_USER
+      - POSTGRES_DB
+      - POSTGRES_PASSWORD
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -d $${POSTGRES_DB} -U $${POSTGRES_USER}"]
+      start_period: 20s
+      interval: 30s
+      retries: 5
+      timeout: 5s
+    volumes:
+      - postgres:/var/lib/postgresql/data
+    networks:
+      - internal

frontend/.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+npm-debug.log
+.env.local

frontend/Dockerfile

@@ -0,0 +1,34 @@
+FROM node:20-alpine AS base
+
+# Step 1. Rebuild the source code only when needed
+FROM base AS builder
+
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock ./
+# Omit --production flag for TypeScript devDependencies
+RUN if [ -f yarn.lock ]; then yarn install --immutable; fi
+
+COPY src ./src
+COPY public ./public
+COPY next-env.d.ts .
+COPY tsconfig.json .
+
+# Environment variables must be present at build time
+# https://github.com/vercel/next.js/discussions/14030
+ARG NEXT_PUBLIC_API_URL
+ENV NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
+ARG FRONTEND_URL
+ENV FRONTEND_URL=${FRONTEND_URL}
+
+# Next.js collects completely anonymous telemetry data about general usage. Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line to disable telemetry at build time
+ENV NEXT_TELEMETRY_DISABLED 1
+
+# Build Next.js based on the preferred package manager
+RUN if [ -f yarn.lock ]; then yarn build; fi
+
+EXPOSE 3000
+ENTRYPOINT ["yarn"]
+CMD ["start"]

frontend/src/app/[id]/page.tsx

@@ -7,6 +7,7 @@ import { Temporal } from '@js-temporal/polyfill'
 import Content from '/src/components/Content/Content'
 import Copyable from '/src/components/Copyable/Copyable'
 import { getEvent } from '/src/config/api'
+import { AppBase } from '/src/config/app'
 import { useTranslation } from '/src/i18n/server'
 import { makeClass, relativeTimeFormat } from '/src/utils'
 
@@ -49,10 +50,10 @@ const Page = async ({ params }: PageProps) => {
         >{t('common:created', { date: relativeTimeFormat(Temporal.Instant.fromEpochSeconds(event.created_at), i18n.language) })}</span>
 
         <Copyable className={styles.info}>
-          {`https://starbestfit.com/${event.id}`}
+          {`${AppBase}${event.id}`}
         </Copyable>
         <p className={makeClass(styles.info, styles.noPrint)}>
-          <Trans i18nKey="event:nav.shareinfo" t={t} i18n={i18n}>_<a href={`mailto:?subject=${encodeURIComponent(t('event:nav.email_subject', { event_name: event.name }))}&body=${encodeURIComponent(`${t('event:nav.email_body')} https://starbestfit.com/${event.id}`)}`}>_</a>_</Trans>
+          <Trans i18nKey="event:nav.shareinfo" t={t} i18n={i18n}>_<a href={`mailto:?subject=${encodeURIComponent(t('event:nav.email_subject', { event_name: event.name }))}&body=${encodeURIComponent(`${t('event:nav.email_body')} ${AppBase}${event.id}`)}`}>_</a>_</Trans>
         </p>
       </Content>
     </Suspense>

frontend/src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Karla } from 'next/font/google'
 
 import Egg from '/src/components/Egg/Egg'
 import Settings from '/src/components/Settings/Settings'
+import { AppBase } from '/src/config/app'
 import TranslateDialog from '/src/components/TranslateDialog/TranslateDialog'
 import { fallbackLng } from '/src/i18n/options'
 import { useTranslation } from '/src/i18n/server'
@@ -12,7 +13,7 @@ import './global.css'
 const karla = Karla({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  metadataBase: new URL('https://starbestfit.com'),
+  metadataBase: AppBase,
   title: {
     absolute: 'Star Fit',
     template: '%s - Star Fit',

frontend/src/components/CreateForm/components/EventInfo/EventInfo.tsx

@@ -2,6 +2,7 @@ import { Trans } from 'react-i18next/TransWithoutContext'
 
 import Copyable from '/src/components/Copyable/Copyable'
 import { EventResponse } from '/src/config/api'
+import { AppBase } from '/src/config/app'
 import { useTranslation } from '/src/i18n/client'
 
 import styles from './EventInfo.module.scss'
@@ -16,10 +17,10 @@ const EventInfo = ({ event }: EventInfoProps) => {
   return <div className={styles.wrapper}>
     <h2>{event.name}</h2>
     <Copyable className={styles.info}>
-      {`https://starbestfit.com/${event.id}`}
+      {`${AppBase}${event.id}`}
     </Copyable>
     <p className={styles.info}>
-      <Trans i18nKey="event:nav.shareinfo_alt" t={t} i18n={i18n}>_<a href={`mailto:?subject=${encodeURIComponent(t('nav.email_subject', { event_name: event.name }))}&body=${encodeURIComponent(`${t('nav.email_body')} https://starbestfit.com/${event.id}`)}`} target="_blank">_</a>_</Trans>
+      <Trans i18nKey="event:nav.shareinfo_alt" t={t} i18n={i18n}>_<a href={`mailto:?subject=${encodeURIComponent(t('nav.email_subject', { event_name: event.name }))}&body=${encodeURIComponent(`${t('nav.email_body')} ${AppBase}${event.id}`)}`} target="_blank">_</a>_</Trans>
     </p>
   </div>
 }

frontend/src/config/app.js

@@ -0,0 +1,7 @@
+if (typeof window === 'undefined') {
+  if (process.env.FRONTEND_URL === undefined) {
+    throw new Error('Expected Frontend URL environment variable')
+  }
+}
+
+export const AppBase = new URL(process.env.FRONTEND_URL || window.location.protocol + "//" + window.location.host)