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

@@ -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 }}

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"]
+CMD ["yarn", "start"]

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;

src/app/StatsList.tsx

@@ -33,7 +33,7 @@ const StatsList = ({
         </Text>
       </VStack>
       <Flex w="80%" flexDirection={{ base: "column", md: "row" }} gap={4}>
-        {groups ? (
+        {groups && groups >= 0 ? (
           <SingleStatComponent
             loading={loading}
             title="Groups Bot Helped"

src/app/layout.tsx

@@ -20,7 +20,7 @@ export default function RootLayout({
       isClient: typeof window !== "undefined"
     });
     const client = createClient({
-      url: process.env.NEXT_PUBLIC_GRAPHQL_URL || "",
+      url: "/api/graphql",
       exchanges: [cacheExchange, ssr, fetchExchange],
       suspense: true
     });

src/app/page.tsx

@@ -85,14 +85,10 @@ export default function Home() {
   );
 
   useEffect(() => {
-    if (!thirtyDayStatsFetching && thirtyDayStats.getStatsRange) {
+    if (!thirtyDayStatsFetching && thirtyDayStats && !thirtyDayStatsError) {
       setLineChartArrState(lineChartArr(thirtyDayStats.getStatsRange));
     }
-  }, [
-    thirtyDayStats.getStatsRange,
-    thirtyDayStatsError,
-    thirtyDayStatsFetching
-  ]);
+  }, [thirtyDayStats, thirtyDayStatsError, thirtyDayStatsFetching]);
 
   return (
     <Fragment>
@@ -152,6 +148,7 @@ export default function Home() {
             </VStack>
           </VStack>
           <VStack gap={10} w="100%">
+            {totalGroups ? (
               <StatsList
                 title="Total Stats"
                 loading={totalStatsFetching || totalGroupsFetching}
@@ -161,6 +158,18 @@ export default function Home() {
                 commands={totalStats.getTotalStats.commandResponses}
                 triggers={totalStats.getTotalStats.timesTriggered}
               />
+            ) : (
+              <StatsList
+                title="Total Stats"
+                loading={totalStatsFetching || totalGroupsFetching}
+                error={totalStatsError || totalGroupsError}
+                groups={0}
+                links={0}
+                commands={0}
+                triggers={0}
+              />
+            )}
+            {todayStats ? (
               <StatsList
                 title="Today's Stats"
                 loading={todaysStatsFetching}
@@ -169,6 +178,16 @@ export default function Home() {
                 commands={todayStats.getTodayStats.commandResponses}
                 triggers={todayStats.getTodayStats.timesTriggered}
               />
+            ) : (
+              <StatsList
+                title="Today's Stats"
+                loading={todaysStatsFetching}
+                error={todaysStatsError}
+                links={0}
+                commands={0}
+                triggers={0}
+              />
+            )}
           </VStack>
           <VStack w="95%" gap="5vh">
             <VStack gap={1}>