From 9a37330edee16a562257d6b036a065cc7891c3a5 Mon Sep 17 00:00:00 2001 From: Lucid Date: Fri, 5 Dec 2025 20:37:26 -0500 Subject: [PATCH] Fixed production issues, fixed render issues, added secret and env variables into dockerfile and gihub actions files, remade dockerfile and github actions --- .github/workflows/main.yml | 2 + Dockerfile | 94 ++++++++++------------------- next.config.ts | 3 +- src/app/StatsList.tsx | 2 +- src/app/layout.tsx | 2 +- src/app/page.tsx | 65 +++++++++++++------- src/components/charts/LineChart.tsx | 4 +- 7 files changed, 80 insertions(+), 92 deletions(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 7b8a2aa..bfe46ef 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -53,6 +53,7 @@ jobs: context: . push: ${{ !github.event.pull_request.head.repo.fork }} tags: ${{ steps.meta.outputs.tags }} + build-args: API_URL=DATABASE_URL=${{ secrets.DATABASE_URL }} - name: Build and Push Latest Docker Image id: build-and-push-latest uses: docker/build-push-action@v4 @@ -61,3 +62,4 @@ jobs: context: . push: true tags: ${{ env.REGISTRY }}/${{ env.OWNER }}/${{ env.IMAGE_NAME }}:latest + build-args: DATABASE_URL=${{ secrets.DATABASE_URL }} diff --git a/Dockerfile b/Dockerfile index 53bb277..3f9a35c 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,72 +1,40 @@ -# syntax=docker.io/docker/dockerfile:1 - -FROM node:20-alpine AS base - -# Enable Corepack +# --- Stage 1: Dependencies --- +FROM node:20-alpine AS dependencies RUN corepack enable - -# Set Yarn to the latest stable version -RUN yarn set version stable - -# Install dependencies only when needed -FROM base AS deps -# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed. -RUN apk add --no-cache libc6-compat +RUN corepack prepare yarn@stable --activate WORKDIR /app +COPY package.json yarn.lock .yarnrc.yml ./ +RUN yarn install -# Install dependencies based on the preferred package manager -COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* ./ -RUN \ - if [ -f yarn.lock ]; then yarn --frozen-lockfile; \ - elif [ -f package-lock.json ]; then npm ci; \ - elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \ - else echo "Lockfile not found." && exit 1; \ - fi - - -# Rebuild the source code only when needed -FROM base AS builder +# --- Stage 2: Builder --- +FROM node:20-alpine AS builder +RUN corepack enable +RUN corepack prepare yarn@stable --activate +ARG DATABASE_URL +ENV DATABASE_URL=${DATABASE_URL} +RUN corepack enable +RUN corepack prepare yarn@stable --activate WORKDIR /app -COPY --from=deps /app/node_modules ./node_modules -COPY . . +COPY --from=dependencies /app/node_modules ./node_modules +COPY . ./ +RUN yarn prisma-gen +RUN yarn build -# Next.js collects completely anonymous telemetry data about general usage. -# Learn more here: https://nextjs.org/telemetry -# Uncomment the following line in case you want to disable telemetry during the build. -# ENV NEXT_TELEMETRY_DISABLED=1 - -RUN \ - if [ -f yarn.lock ]; then yarn run build; \ - elif [ -f package-lock.json ]; then npm run build; \ - elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \ - else echo "Lockfile not found." && exit 1; \ - fi - -# Production image, copy all the files and run next -FROM base AS runner +# --- Stage 3: Runner --- +FROM node:20-alpine AS runner +RUN corepack enable +RUN corepack prepare yarn@stable --activate +ARG DATABASE_URL +ENV DATABASE_URL=${DATABASE_URL} +RUN corepack enable +RUN corepack prepare yarn@stable --activate WORKDIR /app - -ENV NODE_ENV=production -# Uncomment the following line in case you want to disable telemetry during runtime. -# ENV NEXT_TELEMETRY_DISABLED=1 - -RUN addgroup --system --gid 1001 nodejs -RUN adduser --system --uid 1001 nextjs - -COPY --from=builder /app/public ./public - -# Automatically leverage output traces to reduce image size -# https://nextjs.org/docs/advanced-features/output-file-tracing -COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ -COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static - -USER nextjs +COPY --from=dependencies /app/node_modules ./node_modules +COPY --from=builder /app/src/prisma/generated ./src/prisma/generated +COPY --from=builder /app/.next ./.next +COPY --from=builder /app/.yarn ./.yarn +COPY . ./ EXPOSE 3000 -ENV PORT=3000 - -# server.js is created by next build from the standalone output -# https://nextjs.org/docs/pages/api-reference/config/next-config-js/output -ENV HOSTNAME="0.0.0.0" -CMD ["node", "server.js"] \ No newline at end of file +CMD ["yarn", "start"] diff --git a/next.config.ts b/next.config.ts index 1374dc2..764e5e9 100644 --- a/next.config.ts +++ b/next.config.ts @@ -3,8 +3,7 @@ import type { NextConfig } from "next"; const nextConfig: NextConfig = { experimental: { optimizePackageImports: ["@chakra-ui/react"] - }, - output: "standalone" + } }; export default nextConfig; diff --git a/src/app/StatsList.tsx b/src/app/StatsList.tsx index 39d78b7..c23f9b8 100644 --- a/src/app/StatsList.tsx +++ b/src/app/StatsList.tsx @@ -33,7 +33,7 @@ const StatsList = ({ - {groups ? ( + {groups && groups >= 0 ? ( { - if (!thirtyDayStatsFetching && thirtyDayStats.getStatsRange) { + if (!thirtyDayStatsFetching && thirtyDayStats && !thirtyDayStatsError) { setLineChartArrState(lineChartArr(thirtyDayStats.getStatsRange)); } - }, [ - thirtyDayStats.getStatsRange, - thirtyDayStatsError, - thirtyDayStatsFetching - ]); + }, [thirtyDayStats, thirtyDayStatsError, thirtyDayStatsFetching]); return ( @@ -152,23 +148,46 @@ export default function Home() { - - + {totalGroups ? ( + + ) : ( + + )} + {todayStats ? ( + + ) : ( + + )} diff --git a/src/components/charts/LineChart.tsx b/src/components/charts/LineChart.tsx index 4cabc1e..8bad303 100644 --- a/src/components/charts/LineChart.tsx +++ b/src/components/charts/LineChart.tsx @@ -32,7 +32,7 @@ const LineChartComponent = ({ axisLine={false} dataKey={chart.key("day")} stroke={chart.color("border")} - // label={{ value: "Day", position: "bottom" }} + // label={{ value: "Day", position: "bottom" }} />