feat(frontend/v2): ⭐ NextJS App Router Frontend Adoption

apps/frontend/.env.example

@@ -1,8 +1,8 @@
 #
 # Keycloak
 #
-KEYCLOAK_URL="https://yourkeycloak.net/realms/yourrealm"
-KEYCLOAK_ID="yourclient"
+NEXT_PUBLIC_KEYCLOAK_URL="https://yourkeycloak.net/realms/yourrealm"
+NEXT_PUBLIC_KEYCLOAK_ID="yourclient"
 KEYCLOAK_SECRET="topsecret"
 
 #
@@ -15,14 +15,12 @@ NEXTAUTH_SECRET="secondtopsecret"
 # BuildTheEarth
 #
 NEXT_PUBLIC_API_URL="https://api.yourserver.net/api/v1"
-
-#
-# Mapbox
-#
-NEXT_PUBLIC_MAPBOX_TOKEN="pk.XXXXXXXXXXXXXX"
+NEXT_PUBLIC_SMYLER_API_URL="https://smybteapi.yourserver.net"
+NEXT_PUBLIC_FRONTEND_URL="https://yourserver.net"
+FRONTEND_KEY="thirdtopsecret"
 
 #
 # Other Confirguration
 #
-PORT=3000
-ANALYZE=false
+REPORTS_WEBHOOK="https://discord.com/api/webhooks/..."
+NEXT_PUBLIC_MAPBOX_TOKEN="fourthtopsecret"

apps/frontend/.github/workflows/build.yml

@@ -0,0 +1,36 @@
+name: Docker Publish
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Docker login
+        run: |
+          echo "${{ github.token }}" | docker login https://ghcr.io -u ${GITHUB_ACTOR} --password-stdin
+      - name: 'Create env file'
+        run: |
+          touch build.env.local
+          echo KEYCLOAK_URL="https://auth.buildtheearth.net/realms/website" >> build.env.local
+          echo KEYCLOAK_ID="frontend" >> build.env.local
+          echo KEYCLOAK_SECRET="${{ secrets.KEYCLOAK_SECRET }}" >> build.env.local
+          echo NEXTAUTH_URL="https://dash.buildtheearth.net" >> build.env.local
+          echo NEXTAUTH_SECRET="${{ secrets.NEXTAUTH_SECRET }}" >> build.env.local
+          echo NEXT_PUBLIC_API_URL="https://api.buildtheearth.net/api/v1" >> build.env.local
+          echo NEXT_PUBLIC_SMYLER_API_URL="https://smybteapi.buildtheearth.net" >> build.env.local
+          echo NEXT_PUBLIC_FRONTEND_URL="https://buildtheearth.net" >> build.env.local
+          echo FRONTEND_KEY="${{ secrets.FRONTEND_KEY }}" >> build.env.local
+          echo REPORTS_WEBHOOK="${{ secrets.REPORTS_WEBHOOK }}" >> build.env.local
+          echo PORT=3000 >> build.env.local
+
+      - name: Build Docker Image
+        run: docker build . --file Dockerfile --tag ghcr.io/buildtheearth/dashboard-website:$(git rev-parse --short HEAD) --tag ghcr.io/buildtheearth/dashboard-website:latest
+      - name: Docker Push
+        run: docker push ghcr.io/buildtheearth/dashboard-website:$(git rev-parse --short HEAD)
+      - name: Docker Push Latest
+        run: docker push ghcr.io/buildtheearth/dashboard-website:latest

apps/frontend/Dockerfile

@@ -8,7 +8,7 @@ WORKDIR /app
 # Run turbo (will prune the lockfile to only include target dependencies)
 RUN yarn global add turbo@^2.1.1
 COPY . .
-RUN turbo prune frontend --docker
+RUN turbo prune dashboard --docker
 
 # Add lockfile and package.json's of isolated subworkspace
 FROM base AS installer
@@ -24,10 +24,8 @@ RUN yarn list postcss
 # Build the project
 COPY --from=builder /app/out/full/ .
 COPY --from=builder /app/apps/frontend/.env ./apps/frontend/.env
-COPY --from=builder /app/apps/frontend/next.config.js ./apps/frontend/next.config.js
-COPY --from=builder /app/apps/frontend/next-seo.config.ts ./apps/frontend/next-seo.config.ts
-COPY --from=builder /app/apps/frontend/postcss.config.js ./apps/frontend/postcss.config.js
-COPY --from=builder /app/apps/frontend/next-i18next.config.js ./apps/frontend/next-i18next.config.js
+COPY --from=builder /app/apps/frontend/next.config.ts ./apps/frontend/next.config.ts
+COPY --from=builder /app/apps/frontend/postcss.config.cjs ./apps/frontend/postcss.config.cjs
 ENV NEXT_TELEMETRY_DISABLED 1
 
 
@@ -45,13 +43,13 @@ RUN adduser --system --uid 1001 nextjs
 USER nextjs
 
 # Reduce image size
-COPY --from=installer --chown=nextjs:nodejs /app/apps/frontend/.next/standalone ./
-COPY --from=installer --chown=nextjs:nodejs /app/apps/frontend/.next/static ./apps/frontend/.next/static
-COPY --from=installer --chown=nextjs:nodejs /app/apps/frontend/public ./apps/frontend/public
+COPY --from=installer --chown=nextjs:nodejs /app/apps/dashboard/.next/standalone ./
+COPY --from=installer --chown=nextjs:nodejs /app/apps/dashboard/.next/static ./apps/dashboard/.next/static
+COPY --from=installer --chown=nextjs:nodejs /app/apps/dashboard/public ./apps/dashboard/public
 
 EXPOSE 3000
 
 ENV PORT 3000
 ENV HOSTNAME "0.0.0.0"
 
-CMD node apps/frontend/server.js
+CMD node apps/dashboard/server.js

apps/frontend/README.md

@@ -3,9 +3,9 @@
 
 <img width="128" src="https://github.com/BuildTheEarth/assets/blob/main/images/logos/logo.png?raw=true" />
 
-# Website Frontend
+# Dashboard Website
 
-_The Website for the Build The Earth Project._
+_The Dashboard for the Build The Earth Project._
 
 ![official](https://go.buildtheearth.net/official-shield)
 [![chat](https://img.shields.io/discord/706317564904472627.svg?color=768AD4&label=discord&logo=https%3A%2F%2Fdiscordapp.com%2Fassets%2F8c9701b98ad4372b58f13fd9f65f966e.svg)](https://discord.gg/buildtheearth)
@@ -22,14 +22,16 @@ See the global Readme file.
 
 # Envoriment Variables
 
-| Variable                 | Example Value                             | Description                                                       |
-| ------------------------ | ----------------------------------------- | ----------------------------------------------------------------- |
-| KEYCLOAK_URL             | https://yourkeycloak.net/realms/yourrealm | The Keycloak SSO URL, including the realm                         |
-| KEYCLOAK_ID              | yourclient                                | A client ID for your Keycloak Installation                        |
-| KEYCLOAK_SECRET          | topsecret                                 | The client secret of your client                                  |
-| NEXTAUTH_URL             | http://localhost:3000                     | The URL NextAuth should use for redirections back to your website |
-| NEXTAUTH_SECRET          | secondtopsecret                           | A secret used by NextAuth to encrypt session information          |
-| NEXT_PUBLIC_API_URL      | https://api.yourserver.net/api/v1         | The URL of your deployed or local BuildTheEarth API               |
-| NEXT_PUBLIC_MAPBOX_TOKEN | pk.XXXXXXXXXXXXXX                         | A public Mapbox token                                             |
-| PORT                     | 3000                                      | The port the website should run on                                |
-| ANALYZE                  | false                                     | Set to true to enable bundle analysis on build                    |
+| Variable                   | Example Value                             | Description                                                       |
+| -------------------------- | ----------------------------------------- | ----------------------------------------------------------------- |
+| NEXT_PUBLIC_KEYCLOAK_URL   | https://yourkeycloak.net/realms/yourrealm | The Keycloak SSO URL, including the realm                         |
+| NEXT_PUBLIC_KEYCLOAK_ID    | yourclient                                | A client ID for your Keycloak Installation                        |
+| KEYCLOAK_SECRET            | topsecret                                 | The client secret of your client                                  |
+| NEXTAUTH_URL               | http://localhost:3000                     | The URL NextAuth should use for redirections back to your website |
+| NEXTAUTH_SECRET            | secondtopsecret                           | A secret used by NextAuth to encrypt session information          |
+| NEXT_PUBLIC_API_URL        | https://api.yourserver.net/api/v1         | The URL of your deployed or local BuildTheEarth API               |
+| NEXT_PUBLIC_SMYLER_API_URL | https://smybteapi.yourserver.net          | The URL of your deployed or local SmyBTE API                      |
+| NEXT_PUBLIC_MAPBOX_TOKEN   | fourthtopsecret                           | Your personal mapbox studio token                                 |
+| NEXT_PUBLIC_FRONTEND_URL   | https://yourserver.net                    | The URL to your local or deployed BuildTheEarth Website           |
+| FRONTEND_KEY               | thirdtopsecret                            | The Key used to Authenticate against the BuildTheEarth Website    |
+| REPORTS_WEBHOOK            | https://discord.com/api/webhooks/...      | A discord webhook to send reports to                              |

apps/frontend/next.config.ts

@@ -0,0 +1,13 @@
+import type { NextConfig } from 'next';
+import path from 'path';
+
+const nextConfig: NextConfig = {
+	output: 'standalone',
+	poweredByHeader: false,
+	outputFileTracingRoot: path.join(__dirname, '../../'),
+	images: {
+		domains: ['cdn.buildtheearth.net'],
+	},
+};
+
+export default nextConfig;