feat: add build number to the settings page

Author: RMCampos

.github/workflows/docker-publish.yml

@@ -55,6 +55,8 @@ jobs:
           cache-from: type=registry,ref=${{ env.DOCKER_IMAGE }}:buildcache
           cache-to: type=registry,ref=${{ env.DOCKER_IMAGE }}:buildcache,mode=max
           platforms: linux/amd64,linux/arm64
+          build-args: |
+            NEXT_PUBLIC_APP_VERSION=${{ steps.version.outputs.tag }}
 
       - name: Image digest
         run: echo ${{ steps.meta.outputs.digest }}

DEPLOYMENT.md

@@ -17,17 +17,29 @@ docker pull rmcampos/syncable:latest
 ### Option 2: Build the Docker Image Locally
 
 ```bash
-docker build -t rmcampos/syncable:latest .
+docker build --build-arg NEXT_PUBLIC_APP_VERSION=local-snapshot -t rmcampos/syncable:latest .
 ```
 
 ### Run the Container
 
 #### Using environment variables:
 ```bash
-docker run -d \
+docker run -d -p 5432:5432 --rm \
+  --name db \
+  -e POSTGRES_DB="postgres" \
+  -e POSTGRES_USER="postgres" \
+  -e POSTGRES_PASSWORD="default" \
+  postgres:15.8-bookworm
+
+# Then run the create table script, from the project root directory
+docker exec -i db psql -U postgres -d postgres < init-db.sql
+
+DBHOST=$(docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' db)
+
+docker run -d --rm \
   --name syncable \
   -p 3000:3000 \
-  -e DATABASE_URL="postgresql://user:password@host:5432/database" \
+  -e DATABASE_URL="postgresql://postgres:default@$DBHOST:5432/postgres" \
   -e NODE_ENV=production \
   rmcampos/syncable:latest
 ```

Dockerfile

@@ -18,9 +18,12 @@ WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
+ARG NEXT_PUBLIC_APP_VERSION
+
 # Set environment variables for build
 ENV NEXT_TELEMETRY_DISABLED=1
 ENV NODE_ENV=production
+ENV NEXT_PUBLIC_APP_VERSION=${NEXT_PUBLIC_APP_VERSION}
 
 # Build the Next.js application
 RUN corepack enable && corepack prepare yarn@1.22.22 --activate

components/settings/general-settings.tsx

@@ -398,6 +398,14 @@ export function GeneralSettings({
           </Button>
         </CardFooter>
       </Card>
+
+      {process.env.NEXT_PUBLIC_APP_VERSION && (
+        <div className="mt-4 text-center">
+          <p className="text-xs text-muted-foreground">
+            Build {process.env.NEXT_PUBLIC_APP_VERSION}
+          </p>
+        </div>
+      )}
     </div>
   );
 }

docker-compose.yml

@@ -32,6 +32,7 @@ services:
     environment:
       DATABASE_URL: postgresql://postgres:default@db:5432/postgres
       NODE_ENV: development
+      NEXT_PUBLIC_APP_VERSION: local-snapshot
     command: >
       bash -c "
         yarn install &&

next.config.mjs

@@ -14,6 +14,9 @@ try {
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'standalone', // Enable standalone mode for Docker deployment
+  env: {
+    NEXT_PUBLIC_APP_VERSION: process.env.NEXT_PUBLIC_APP_VERSION || '1.0.0',
+  },
   eslint: {
     ignoreDuringBuilds: true,
   },