initial commit 🐘

Author: evanshortiss

.dockerignore

@@ -0,0 +1,7 @@
+# Environment files should not be copied and pushed to a container registry!
+.env*
+
+# Host node_modules, and .next folder should not be copied into the container.
+# Issues related to macOS vs Linux binaries for native addons etc. could occur
+node_modules
+.next

.env.example

@@ -0,0 +1,5 @@
+# A Neon postgresql connection string. Visit https://console.neon.tech/ to obtain yours
+DATABASE_URL = ""
+
+# The same Neon postgresql connection string without the "pgbouncer=true" query parameter
+DIRECT_DATABASE_URL = ""

.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "extends": "next/core-web-vitals"
+}
+  

.github/workflows/pr-build-and-preview.yaml

@@ -0,0 +1,76 @@
+name: Build Container Image and Preview Environment
+
+on:
+  workflow_dispatch:
+  pull_request:
+    branches:
+      - '*'
+
+jobs:
+  build-container:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout source code
+      uses: actions/checkout@v3
+
+    - name: Login to Docker Hub
+      uses: docker/login-action@v3
+      with:
+        username: ${{ secrets.DOCKERHUB_USERNAME }}
+        password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+    - name: Build and Push
+      uses: docker/build-push-action@v5
+      with:
+        push: true
+        context: elements-application/
+        file: elements-application/Containerfile
+        tags: ${{ secrets.DOCKERHUB_USERNAME }}/neon-kube-previews:${{ github.event.pull_request.head.sha }}
+
+  create-preview-environment:
+    runs-on: ubuntu-latest
+
+    # Wait for the docker build and push to complete prior to running this job.
+    # Technically this could run in parallel, but it doesn't make sense to add
+    # a preview URL if the build step fails 
+    needs: build-container
+
+    # This permission is required to comment with the preview URL on the PR
+    permissions: 
+      pull-requests: write 
+
+    steps:
+    # Create a new branch on Neon using the PR number in the branch name. This
+    # operation is idempotent, so it's effectively a no-op if more commits are
+    # push to the original PR
+    - name: Create Neon Branch and Compute for PR
+      id: create-branch
+      uses: neondatabase/create-branch-action@v4
+      with:
+        api_key: ${{ secrets.NEON_API_KEY }}
+        project_id: ${{ secrets.NEON_PROJECT_ID }}
+        branch_name: pr-${{ github.event.number }}
+        parent: main
+
+    - name: Install the Argo CD CLI
+      run: |
+        curl -sSL -o argocd-linux-amd64 https://github.com/argoproj/argo-cd/releases/download/v2.8.4/argocd-linux-amd64
+        sudo install -m 555 argocd-linux-amd64 /usr/local/bin/argocd
+        rm argocd-linux-amd64
+
+    - name: Login to Argo CD
+      run: argocd login ${{ secrets.ARGOCD_HOSTNAME }} --username ${{ secrets.ARGOCD_USERNAME }} --password ${{ secrets.ARGOCD_PASSWORD }}
+
+    - name: Update the Preview Environment with the Neon Branch URL
+      run: argocd app set nkp-pr-${{github.event.number}} --parameter database.url=${{ steps.create-branch.outputs.db_url }}
+
+    - name: Comment on Pull Request
+      uses: thollander/actions-comment-pull-request@v2
+      with:
+        message: |
+          :rocket: Preview URL: https://pr-${{github.event.number}}.${{ secrets.PREVIEW_SUBDOMAIN }}
+          :octopus: Argo CD URL: https://${{ secrets.ARGOCD_HOSTNAME }}/applications/argocd/nkp-pr-${{github.event.number}}
+        # Comment tag allows the action to update an existing comment, if one
+        # exists. This prevents spamming the PR with identical comments
+        comment_tag: preview-url

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.nvmrc

@@ -0,0 +1 @@
+v18.18.0

Dockerfile

@@ -0,0 +1,56 @@
+# This Dockerfile/Containerfile is based on the official Next.js sample:
+# https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
+FROM node:18 AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN \
+  if [ -f package-lock.json ]; then npm ci; \
+  else echo "A package-lock.json was not found. Run 'npm i --package-lock-only' to generate it." && exit 1; \
+  fi
+
+# Rebuild the source code and schemas only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+ENV NEXT_TELEMETRY_DISABLED 1
+RUN npx prisma generate
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+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
+
+# These can be overwritten using "docker run -e", or in a deployment.yaml
+# when being run on kubernetes
+ENV PORT 3000
+ENV HOSTNAME "0.0.0.0"
+
+CMD ["node", "server.js"]

README.md

@@ -0,0 +1,31 @@
+# Neon Branching for Kubernetes-based Preview Environments
+
+## How it Works
+
+This repository contains source code for a sample Next.js application. This
+application can be developed locally, and then built into a container image
+using GitHub Actions workflows.
+
+Each pull request opened against the repository will trigger a container image
+build, and will also result in a preview environment being created on a
+development Kubernetes cluster. The preview environment creation is handled by
+an [Argo CD ApplicationSet](https://argo-cd.readthedocs.io/en/stable/user-guide/application-set/)
+and the manifests defined in [this manifest repository](https://github.com/evanshortiss/neon-kube-previews-manifests).
+Once the build associated with a pull request is complete, it will comment on
+the pull request with a link to the preview environment.
+
+## Requirements
+
+To run the GitHub Actions workflow, add the following secrets to the repository
+using the **Settings > Secrets and variables > Actions** screen:
+
+* `DOCKERHUB_TOKEN` - A token with write access to a repository on Docker Hub.
+* `DOCKERHUB_USERNAME` - The username that owns the `neon-kube-previews` repository that the container image will be written to.
+* `NEON_API_KEY` - Found in the [Developer Settings](https://console.neon.tech/app/settings/api-keys) screen on the Neon console.
+* `NEON_PROJECT_ID` - Found in *Settings > General* on the Neon project dashboard.
+* `ARGOCD_HOSTNAME` - Strictly the hostname, e.g `argocd.foo.bar` without `https`.
+* `ARGOCD_USERNAME` - A valid Argo CD username. You can can use `admin` if you're prototyping.
+* `ARGOCD_PASSWORD` - The password associated with the given `ARGOCD_USERNAME`.
+* `PREVIEW_SUBDOMAIN` - The subdomain that hosts preview environments, e.g `neon.ngrok.app`. This will be used to form a full preview environment URL, i.e `https://pr-1.${PREVIEW_SUBDOMAIN}`
+
+If you're unfamiliar with how to add secrets to a GitHub repository, you can read more about in [GitHub's documentation](https://docs.github.com/en/actions/security-guides/encrypted-secrets).

app/favicon.ico

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

app/globals.css

@@ -0,0 +1,22 @@
+import './globals.css';
+import { Inter } from 'next/font/google';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata = {
+  title: 'Next.js + Prisma + Neon',
+  description:
+    'Next.js example app with Prisma as the ORM and Neon as the Postgres database',
+};
+
+type RouteLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function RootLayout({ children }: RouteLayoutProps) {
+  return (
+    <html lang="en" className={inter.className}>
+      <body>{children}</body>
+    </html>
+  );
+}

app/layout.tsx

@@ -0,0 +1,33 @@
+import { prisma } from '~/lib/prisma';
+
+export const dynamic = 'force-dynamic';
+
+async function getData () {
+  const elements = await prisma.element.findMany();
+
+  return elements
+}
+
+export default async function Home () {
+  const elements = await getData()
+  const HOSTNAME = process.env.HOSTNAME
+  return (
+    <main className="min-h-screen flex items-center justify-center bg-[#1A1A1A]">
+      <ul className="grid grid-cols-2 md:grid-cols-5 gap-5">
+        {elements.map((element:any) => (
+          <li
+            key={element.id}
+            className="relative flex flex-col text-center p-5 rounded-md bg-[#00E699] transition-colors hover:bg-[#00e5BF] text-[black]"
+          >
+            <p className="absolute top-2 left-2 text-sm">
+              {element.atomicNumber}
+            </p>
+            <h2 className="text-2xl font-medium">{element.symbol}</h2>
+            <p className="text-base">{element.elementName}</p>
+          </li>
+        ))}
+        <p>{HOSTNAME}</p>
+      </ul>
+    </main>
+  );
+}

app/page.tsx

@@ -0,0 +1,28 @@
+import { PrismaClient } from '@prisma/client';
+import { get } from 'env-var'
+import { PHASE_PRODUCTION_BUILD } from 'next/constants';
+const globalForPrisma = global as unknown as { prisma: PrismaClient };
+
+const NODE_ENV = get('NODE_ENV').default('development').asEnum(['development', 'production'])
+const NEXT_PHASE = get('NEXT_PHASE').asString()
+
+const isProductionEnv = NODE_ENV === 'production'
+const isBuildingProduction = NEXT_PHASE === PHASE_PRODUCTION_BUILD
+
+// This will throw an error if the DATABASE_URL environment variable is missing
+// at runtime, but will not throw when compiling a production build using next
+const DATABASE_URL = get('DATABASE_URL').required(isProductionEnv && !isBuildingProduction).asUrlString()
+
+export const prisma =
+  globalForPrisma.prisma ||
+  new PrismaClient({
+    datasources: {
+      db: {
+        // when using a pooled database connection with prisma, you need to append`?pgbouncer=true` to the connection string.
+        // The reason this is done here rather than in the .env file is because the Neon Vercel integration doesn't include it.
+        url: `${DATABASE_URL}?pgbouncer=true&connect_timeout=10&pool_timeout=10`,
+      },
+    },
+  });
+
+if (isProductionEnv) globalForPrisma.prisma = prisma;

lib/prisma.ts

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // This is necessary to support deployment as a via container image
+  output: 'standalone'
+}
+
+module.exports = nextConfig