Static Site Generation (#122)

* remove hard coded dynamic req

* add staticParams generator

* Remove server action declaration

* Add output: export

* Add pages deploy workflow

* fix syntax error

* allow run on all branches

* run server in bg

* use npm as package manager

* switch to npm; add packagelock

* add frontend working directory

* test run cd in node step

* move to frontend before bulding

* set cache dependency path:w

* cd frontend for dep install:w

* cd frontend for dep next build:w

* Remove static export step (handled by next config instead)

* remove tests workflow; will be added later

.github/workflows/pages.yml

@@ -0,0 +1,128 @@
+
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    # branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Run MySQL Server
+        run: docker run -d -p 3800:3306 --name mysql -e MYSQL_ROOT_PASSWORD=dbtestpassword -e MYSQL_DATABASE=ghworkflow_testdb mysql@sha256:566007208a3f1cc8f9df6b767665b5c9b800fc4fb5f863d17aa1df362880ed04
+
+      - name: Install MySQL Client
+        run: sudo apt-get install -y mysql-client
+
+      - name: Wait for MySQL Server to Start
+        run: sleep 10
+
+      - name: Add Testing Database
+        run: mysql -h 127.0.0.1 -u root -pdbtestpassword -P 3800 -e "CREATE DATABASE testing_ghworkflow_testdb;"
+
+      - name: Copy data into database
+        run: mysql -h 127.0.0.1 -u root -pdbtestpassword -P 3800 ghworkflow_testdb < ./archive/latest.sql
+
+      - name: Install Poetry
+        uses: snok/install-poetry@v1
+      - name: Install Dependencies
+        run: poetry install --no-root --no-interaction
+      - name: Run Server
+        run: |
+          poetry run hypercorn server:app --bind 0.0.0.0:7771 &
+        env:
+          MYSQLDATABASE: 'ghworkflow_testdb'
+          MYSQLUSER: 'root'
+          MYSQLPASSWORD: 'dbtestpassword'
+          MYSQLHOST: 'localhost'
+          MYSQLPORT: '3800'
+
+          TESTING_MYSQLDATABASE: 'testing_ghworkflow_testdb'
+          TESTING_MYSQLUSER: 'root'
+          TESTING_MYSQLPASSWORD: 'dbtestpassword'
+          TESTING_MYSQLHOST: 'localhost'
+          TESTING_MYSQLPORT: '3800'
+
+
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+
+      - name: Move to ./frontend
+        run: cd ./frontend
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+          cache-dependency-path: 'frontend/package-lock.json'
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: cd frontend && ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Build with Next.js
+        run: cd frontend && ${{ steps.detect-package-manager.outputs.runner }} next build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./frontend/out
+
+  # Deployment job
+  deploy:
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

frontend/app/layout.tsx

@@ -10,7 +10,7 @@ export const metadata: Metadata = {
   description: "T500 Aggregator",
 };
 
-export const dynamic = "force-dynamic";
+// export const dynamic = "force-dynamic";
 export default function RootLayout({
   children,
 }: {

frontend/app/season/[seasonNumber]/page.tsx

@@ -1,12 +1,22 @@
 import React from "react";
 import { Card } from "@/app/components";
 import {
+    fetchSeasonList,
   fetchSingleSeasonPageChartData,
   fetchSingleSeasonStdDevs,
 } from "@/app/utils/serverSideProps";
 import { BarChart } from "@/app/components";
 import TopMatter from "@/app/components/topmatter/topmatter";
 
+
+export async function generateStaticParams() {
+
+  const seasons = await fetchSeasonList()
+
+  console.log(seasons)
+  return seasons.map(season => ({seasonNumber: season.replace("_8", "")}))
+}
+
 const HeroStdDev = ({ value, role }: { value: number; role: string }) => {
   return (
     <div className="text-center pt-5 pb-5">

frontend/app/utils/serverSideProps.ts

@@ -1,5 +1,3 @@
-"use server";
-
 const backendUrl = process.env.BACKEND_URL;
 export type Statistic = {
   mean: number;

frontend/next.config.js

@@ -1,9 +1,11 @@
 /** @type {import('next').NextConfig} */
-const backendUrl =
+let backendUrl =
   process.env.NODE_ENV === "development"
     ? "http://localhost:7771"
     : "http://server:8000";
 
+backendUrl = "http://localhost:7771"
+
 const nextConfig = {
   async rewrites() {
     return [
@@ -17,6 +19,7 @@ const nextConfig = {
     BACKEND_URL: backendUrl,
   },
   compress: true,
+  output: "export",
 };
 
 module.exports = nextConfig;