init gurubase frontend

.github/workflows/frontend-docker-image-dockerhub.yml

@@ -0,0 +1,143 @@
+name: Build and Push Docker Image
+
+on:
+  push:
+    branches:
+      - '**'
+    paths:
+      - 'src/gurubase-frontend/**'
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: src/gurubase-frontend
+
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Create environment files
+      run: |
+        # Create .env.prod
+        cat << EOF > .env.prod
+        NEXT_PUBLIC_NODE_ENV=\${{ secrets.NEXT_PUBLIC_NODE_ENV_PROD_FE }}
+        NEXT_PUBLIC_PROJECT_URL=\${{ secrets.NEXT_PUBLIC_PROJECT_URL_PROD_FE }}
+        NEXT_PUBLIC_RUNTIME=\${{ secrets.NEXT_PUBLIC_RUNTIME_PROD_FE }}
+        NEXT_PUBLIC_INSTRUMENTATION_HOOK=\${{ secrets.NEXT_PUBLIC_INSTRUMENTATION_HOOK_PROD_FE }}
+        NEXT_PUBLIC_BACKEND_AUTH_TOKEN=\${{ secrets.NEXT_PUBLIC_BACKEND_AUTH_TOKEN_PROD_FE }}
+        NEXT_PUBLIC_MOBILE_DEBUG_CONSOLE=\${{ secrets.NEXT_PUBLIC_MOBILE_DEBUG_CONSOLE_PROD_FE }}
+        NEXT_PUBLIC_BACKEND_FETCH_URL=\${{ secrets.NEXT_PUBLIC_BACKEND_FETCH_URL_PROD_FE }}
+        NEXT_PUBLIC_BACKEND_FETCH_URL_CLIENT=\${{ secrets.NEXT_PUBLIC_BACKEND_FETCH_URL_CLIENT_PROD_FE }}
+        NEXT_PUBLIC_PAGE_VISIT_MODULE=\${{ secrets.NEXT_PUBLIC_PAGE_VISIT_MODULE_PROD_FE }}
+        NEXT_PUBLIC_MIXPANEL_TOKEN=\${{ secrets.NEXT_PUBLIC_MIXPANEL_TOKEN_PROD_FE }}
+        NEXT_PUBLIC_SENTRY_DSN=\${{ secrets.NEXT_PUBLIC_SENTRY_DSN_PROD_FE }}
+        NEXT_PUBLIC_SENTRY_ORG=\${{ secrets.NEXT_PUBLIC_SENTRY_ORG_PROD_FE }}
+        NEXT_PUBLIC_SENTRY_PROJECT=\${{ secrets.NEXT_PUBLIC_SENTRY_PROJECT_PROD_FE }}
+        NEXT_TELEMETRY_DEBUG=\${{ secrets.NEXT_TELEMETRY_DEBUG_PROD_FE }}
+        AUTH0_SECRET=\${{ secrets.AUTH0_SECRET_PROD_FE }}
+        AUTH0_BASE_URL=\${{ secrets.AUTH0_BASE_URL_PROD_FE }}
+        AUTH0_ISSUER_BASE_URL=\${{ secrets.AUTH0_ISSUER_BASE_URL_PROD_FE }}
+        AUTH0_CLIENT_ID=\${{ secrets.AUTH0_CLIENT_ID_PROD_FE }}
+        AUTH0_CLIENT_SECRET=\${{ secrets.AUTH0_CLIENT_SECRET_PROD_FE }}
+        AUTH0_AUDIENCE=\${{ secrets.AUTH0_AUDIENCE_PROD_FE }}
+        AUTH0_ALGORITHMS=\${{ secrets.AUTH0_ALGORITHMS_PROD_FE }}
+        EOF
+
+        # Create .env.staging
+        cat << EOF > .env.staging
+        NEXT_PUBLIC_NODE_ENV=\${{ secrets.NEXT_PUBLIC_NODE_ENV_STAGING_FE }}
+        NEXT_PUBLIC_PROJECT_URL=\${{ secrets.NEXT_PUBLIC_PROJECT_URL_STAGING_FE }}
+        NEXT_PUBLIC_RUNTIME=\${{ secrets.NEXT_PUBLIC_RUNTIME_STAGING_FE }}
+        NEXT_PUBLIC_INSTRUMENTATION_HOOK=\${{ secrets.NEXT_PUBLIC_INSTRUMENTATION_HOOK_STAGING_FE }}
+        NEXT_PUBLIC_BACKEND_AUTH_TOKEN=\${{ secrets.NEXT_PUBLIC_BACKEND_AUTH_TOKEN_STAGING_FE }}
+        NEXT_PUBLIC_MOBILE_DEBUG_CONSOLE=\${{ secrets.NEXT_PUBLIC_MOBILE_DEBUG_CONSOLE_STAGING_FE }}
+        NEXT_PUBLIC_BACKEND_FETCH_URL=\${{ secrets.NEXT_PUBLIC_BACKEND_FETCH_URL_STAGING_FE }}
+        NEXT_PUBLIC_BACKEND_FETCH_URL_CLIENT=\${{ secrets.NEXT_PUBLIC_BACKEND_FETCH_URL_CLIENT_STAGING_FE }}
+        NEXT_PUBLIC_PAGE_VISIT_MODULE=\${{ secrets.NEXT_PUBLIC_PAGE_VISIT_MODULE_STAGING_FE }}
+        NEXT_TELEMETRY_DEBUG=\${{ secrets.NEXT_TELEMETRY_DEBUG_STAGING_FE }}
+        AUTH0_SECRET=\${{ secrets.AUTH0_SECRET_STAGING_FE }}
+        AUTH0_BASE_URL=\${{ secrets.AUTH0_BASE_URL_STAGING_FE }}
+        AUTH0_ISSUER_BASE_URL=\${{ secrets.AUTH0_ISSUER_BASE_URL_STAGING_FE }}
+        AUTH0_CLIENT_ID=\${{ secrets.AUTH0_CLIENT_ID_STAGING_FE }}
+        AUTH0_CLIENT_SECRET=\${{ secrets.AUTH0_CLIENT_SECRET_STAGING_FE }}
+        AUTH0_AUDIENCE=\${{ secrets.AUTH0_AUDIENCE_STAGING_FE }}
+        AUTH0_ALGORITHMS=\${{ secrets.AUTH0_ALGORITHMS_STAGING_FE }}
+        EOF
+    
+    - name: Check for console statements
+      run: |
+        files_with_console=$(grep -rL "use server" --include="*.js" --exclude-dir={node_modules,public,.next} . | xargs grep -nE "^[^/]*console\.(log|error|warn|info|debug|trace|dir|dirxml|table|time|timeEnd|group|groupEnd|count|countReset|assert|profile|profileEnd)" | cut -d: -f1 | sort -u || true)
+        if [ -n "$files_with_console" ]; then
+          echo "Console statements found in the following files:"
+          echo "$files_with_console"
+          echo "Failing the build."
+          exit 1
+        else
+          echo "No uncommented console statements found in files without 'use server'."
+        fi
+
+    - name: Set up QEMU
+      uses: docker/setup-qemu-action@v2
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v2
+
+    - name: Cache Docker layers
+      uses: actions/cache@v3
+      with:
+        path: /tmp/.buildx-cache
+        key: ${{ runner.os }}-buildx-${{ github.sha }}
+        restore-keys: |
+          ${{ runner.os }}-buildx-
+    
+    - name: Configure Dockerhub credentials
+      run: echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_USERNAME }}" --password-stdin
+
+    - name: Get branch name
+      id: branch-name
+      uses: tj-actions/branch-names@v8
+
+    - name: Set image tag and Dockerfile
+      id: set-vars
+      run: |
+        branch=$(echo ${{ steps.branch-name.outputs.current_branch }} | tr '/' '-')
+        commit_sha=${GITHUB_SHA::7}
+        echo "image_tag=${branch}-${commit_sha}" >> $GITHUB_OUTPUT
+        echo "branch_tag=${branch}" >> $GITHUB_OUTPUT
+        if [ "${{ steps.branch-name.outputs.current_branch }}" = "master" ]; then
+          echo "dockerfile=Dockerfile" >> $GITHUB_OUTPUT
+        else
+          echo "dockerfile=Dockerfile.staging" >> $GITHUB_OUTPUT
+        fi
+
+    - name: Build and push
+      uses: docker/build-push-action@v4
+      env:
+        REPOSITORY: ddosify/kubernetesguru_frontend
+      with:
+        context: .
+        push: true
+        tags: |
+          ${{ env.REPOSITORY }}:${{ steps.set-vars.outputs.image_tag }}
+          ${{ env.REPOSITORY }}:${{ steps.set-vars.outputs.branch_tag }}
+        platforms: linux/amd64
+        file: ${{ steps.set-vars.outputs.dockerfile }}
+        cache-from: type=local,src=/tmp/.buildx-cache
+        cache-to: type=local,dest=/tmp/.buildx-cache-new,mode=max
+
+    - name: Image Tags and Dockerfile
+      run: |
+        echo "Commit Tag: ${{ steps.set-vars.outputs.image_tag }}"
+        echo "Branch Tag: ${{ steps.set-vars.outputs.branch_tag }}"
+        echo "Dockerfile: ${{ steps.set-vars.outputs.dockerfile }}"
+        echo "Commit Tag: ${{ steps.set-vars.outputs.image_tag }}" >> $GITHUB_STEP_SUMMARY
+        echo "Branch Tag: ${{ steps.set-vars.outputs.branch_tag }}" >> $GITHUB_STEP_SUMMARY
+        echo "Dockerfile: ${{ steps.set-vars.outputs.dockerfile }}" >> $GITHUB_STEP_SUMMARY
+
+    - name: Cleanup environment files
+      if: always()
+      run: |
+        rm -f .env.prod .env.staging
+        echo "Environment files cleaned up"

.github/workflows/frontend-snyk-scan.yml

@@ -0,0 +1,20 @@
+name: Snyk Security Scan
+
+on:
+  push:
+  pull_request:
+    branches: [master]
+  workflow_dispatch:
+
+jobs:
+  security:
+    # runs-on: ubuntu-latest
+    runs-on: self-hosted
+    steps:
+      - uses: actions/checkout@v3
+      - name: Run Snyk to check for vulnerabilities
+        uses: snyk/actions/node@master
+        env:
+          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
+        with:
+          command: test

src/gurubase-frontend/.dockerignore

@@ -0,0 +1,9 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git
+.yarnrc.yml
+.github

src/gurubase-frontend/.gitignore

@@ -0,0 +1,48 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+# .env*.dev
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# Sentry Config File
+.env.sentry-build-plugin
+
+server/*
+
+src/components/_exampleStreaming.js
+
+# Environment files
+.env*
+!.env.example

src/gurubase-frontend/.prettierrc

@@ -0,0 +1,21 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "singleAttributePerLine": false,
+  "bracketSameLine": true,
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "useTabs": false,
+  "embeddedLanguageFormatting": "auto",
+  "vueIndentScriptAndStyle": false
+}

src/gurubase-frontend/.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.2.2.cjs

src/gurubase-frontend/Dockerfile

@@ -0,0 +1,67 @@
+FROM node:20.11.1-alpine AS base
+
+# 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
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn; \
+  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
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# 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-prod; \
+  elif [ -f package-lock.json ]; then npm run build-prod; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build-prod; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Production image, copy all the files and run next
+FROM base AS runner
+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
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# 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
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+CMD HOSTNAME="0.0.0.0" node server.js

src/gurubase-frontend/Dockerfile.selfhosted

@@ -0,0 +1,67 @@
+FROM node:20.11.1-alpine AS base
+
+# 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
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn; \
+  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
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# 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-selfhosted; \
+  elif [ -f package-lock.json ]; then npm run build-selfhosted; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build-selfhosted; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Production image, copy all the files and run next
+FROM base AS runner
+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
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# 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
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+CMD HOSTNAME="0.0.0.0" node server.js