feat: centralize branding

.env.example

@@ -5,7 +5,7 @@ CACHE_DATABASE_PATH="./other/cache.db"
 SESSION_SECRET="super-duper-s3cret"
 HONEYPOT_SECRET="super-duper-s3cret"
 RESEND_API_KEY="re_blAh_blaHBlaHblahBLAhBlAh"
-SENTRY_DSN="your-dsn"
+#SENTRY_DSN="your-dsn"
 
 # this is set to a random value in the Dockerfile
 INTERNAL_COMMAND_TOKEN="some-made-up-token"

.github/workflows/deploy.yml

@@ -1,9 +1,8 @@
 name: 🚀 Deploy
+
 on:
   push:
-    branches:
-      - main
-      - dev
+    branches: [main, dev]
   pull_request: {}
 
 concurrency:
@@ -30,12 +29,6 @@ jobs:
       - name: 📥 Download deps
         uses: bahmutov/npm-install@v1
 
-      - name: 🏄 Copy test env vars
-        run: cp .env.example .env
-
-      - name: 🛠 Setup Database
-        run: npx prisma migrate deploy && npx prisma generate --sql
-
       - name: 🔬 Lint
         run: npm run lint
 
@@ -54,15 +47,6 @@ jobs:
       - name: 📥 Download deps
         uses: bahmutov/npm-install@v1
 
-      - name: 🏗 Build
-        run: npm run build
-
-      - name: 🏄 Copy test env vars
-        run: cp .env.example .env
-
-      - name: 🛠 Setup Database
-        run: npx prisma migrate deploy && npx prisma generate --sql
-
       - name: 🔎 Type check
         run: npm run typecheck --if-present
 
@@ -84,9 +68,6 @@ jobs:
       - name: 🏄 Copy test env vars
         run: cp .env.example .env
 
-      - name: 🛠 Setup Database
-        run: npx prisma migrate deploy && npx prisma generate --sql
-
       - name: ⚡ Run vitest
         run: npm run test -- --coverage
 
@@ -113,7 +94,7 @@ jobs:
         run: npm run test:e2e:install
 
       - name: 🛠 Setup Database
-        run: npx prisma migrate deploy && npx prisma generate --sql
+        run: npx prisma migrate deploy
 
       - name: 🏦 Cache Database
         id: db-cache
@@ -143,11 +124,26 @@ jobs:
           path: playwright-report/
           retention-days: 30
 
-  container:
-    name: 📦 Prepare Container
-    runs-on: ubuntu-24.04
-    # only prepare container on pushes
-    if: ${{ github.event_name == 'push' }}
+  prepare_deploy:
+    name: 🧰 Prepare deploy metadata
+    runs-on: ubuntu-22.04
+    needs: [lint, typecheck, vitest, playwright]
+    if: >-
+      (
+        github.event_name == 'push' &&
+        (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev')
+      ) || (
+        github.event_name == 'pull_request' &&
+        (
+          github.event.action == 'opened' ||
+          github.event.action == 'reopened' ||
+          github.event.action == 'synchronize' ||
+          github.event.action == 'ready_for_review'
+        ) &&
+        github.event.pull_request.head.repo.fork == false
+      )
+    outputs:
+      base_app_name: ${{ steps.app_name.outputs.value }}
     steps:
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v4
@@ -158,72 +154,123 @@ jobs:
         uses: SebRollen/[email protected]
         id: app_name
         with:
-          file: 'fly.toml'
-          field: 'app'
+          file: fly.toml
+          field: app
+
+  deploy_preview:
+    name: 👀 Deploy Preview
+    runs-on: ubuntu-22.04
+    needs: [prepare_deploy]
+    if: >-
+      github.event_name == 'pull_request' && (
+        github.event.action == 'opened' ||
+        github.event.action == 'reopened' ||
+        github.event.action == 'synchronize' ||
+        github.event.action == 'ready_for_review'
+      ) && github.event.pull_request.head.repo.fork == false
+    environment:
+      name: preview
+      url:
+        https://${{ needs.prepare_deploy.outputs.base_app_name }}-pr-${{
+        github.event.pull_request.number }}.fly.dev
+    permissions:
+      contents: read
+      pull-requests: write
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 50
 
       - name: 🎈 Setup Fly
         uses: superfly/flyctl-actions/[email protected]
 
-      - name: 📦 Build Staging Container
-        if: ${{ github.ref == 'refs/heads/dev' }}
-        run: |
-          flyctl deploy \
-            --build-only \
-            --push \
-            --image-label ${{ github.sha }} \
-            --build-arg COMMIT_SHA=${{ github.sha }} \
-            --app ${{ steps.app_name.outputs.value }}-staging
+      - name: 🚀 Deploy Preview (remote build)
+        shell: bash
         env:
           FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
-
-      - name: 📦 Build Production Container
-        if: ${{ github.ref == 'refs/heads/main' }}
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
         run: |
+          set -euo pipefail
+
           flyctl deploy \
-            --build-only \
-            --push \
-            --image-label ${{ github.sha }} \
-            --build-arg COMMIT_SHA=${{ github.sha }} \
-            --build-secret SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }} \
-            --app ${{ steps.app_name.outputs.value }}
-        env:
-          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
+            --remote-only \
+            --build-arg "COMMIT_SHA=${{ github.sha }}" \
+            --build-secret "SENTRY_AUTH_TOKEN=${SENTRY_AUTH_TOKEN}" \
+            --app "${{ needs.prepare_deploy.outputs.base_app_name }}-pr-${{ github.event.pull_request.number }}"
+
+      - name: 💬 Comment preview URL
+        uses: peter-evans/create-or-update-comment@v4
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          body: |
+            ✅ Preview deployed
+            🔗 https://${{ needs.prepare_deploy.outputs.base_app_name }}-pr-${{ github.event.pull_request.number }}.fly.dev
 
-  deploy:
-    name: 🚀 Deploy
-    runs-on: ubuntu-24.04
-    needs: [lint, typecheck, vitest, playwright, container]
-    # only deploy on pushes
-    if: ${{ github.event_name == 'push' }}
+  deploy_staging:
+    name: 🚀 Deploy Staging
+    runs-on: ubuntu-22.04
+    needs: [prepare_deploy]
+    if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/dev' }}
+    environment:
+      name: staging
+      url:
+        https://${{ needs.prepare_deploy.outputs.base_app_name
+        }}-staging.fly.dev
+    permissions:
+      contents: read
     steps:
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v4
         with:
-          fetch-depth: '50'
-
-      - name: 👀 Read app name
-        uses: SebRollen/[email protected]
-        id: app_name
-        with:
-          file: 'fly.toml'
-          field: 'app'
+          fetch-depth: 50
 
       - name: 🎈 Setup Fly
         uses: superfly/flyctl-actions/[email protected]
 
-      - name: 🚀 Deploy Staging
-        if: ${{ github.ref == 'refs/heads/dev' }}
-        run: |
-          flyctl deploy \
-            --image "registry.fly.io/${{ steps.app_name.outputs.value }}-staging:${{ github.sha }}" \
-            --app ${{ steps.app_name.outputs.value }}-staging
+      - name: 🚀 Deploy Staging (remote build)
+        shell: bash
         env:
           FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
-
-      - name: 🚀 Deploy Production
-        if: ${{ github.ref == 'refs/heads/main' }}
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
         run: |
+          set -euo pipefail
+
           flyctl deploy \
-            --image "registry.fly.io/${{ steps.app_name.outputs.value }}:${{ github.sha }}"
+            --remote-only \
+            --build-arg "COMMIT_SHA=${{ github.sha }}" \
+            --build-secret "SENTRY_AUTH_TOKEN=${SENTRY_AUTH_TOKEN}" \
+            --app "${{ needs.prepare_deploy.outputs.base_app_name }}-staging"
+
+  deploy_production:
+    name: 🚀 Deploy Production
+    runs-on: ubuntu-22.04
+    needs: [prepare_deploy]
+    if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/main' }}
+    environment:
+      name: production
+      url: https://${{ needs.prepare_deploy.outputs.base_app_name }}.fly.dev
+    permissions:
+      contents: read
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 50
+
+      - name: 🎈 Setup Fly
+        uses: superfly/flyctl-actions/[email protected]
+
+      - name: 🚀 Deploy Production (remote build)
+        shell: bash
         env:
           FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: |
+          set -euo pipefail
+
+          flyctl deploy \
+            --remote-only \
+            --build-arg "COMMIT_SHA=${{ github.sha }}" \
+            --build-secret "SENTRY_AUTH_TOKEN=${SENTRY_AUTH_TOKEN}" \
+            --app "${{ needs.prepare_deploy.outputs.base_app_name }}"

.github/workflows/preview-cleanup.yml

@@ -0,0 +1,46 @@
+name: 🧹 Preview Cleanup
+
+on:
+  pull_request:
+    types: [closed]
+
+jobs:
+  destroy:
+    name: 🗑 Remove Preview App
+    runs-on: ubuntu-24.04
+    if: ${{ github.event.pull_request.head.repo.fork == false }}
+
+    permissions:
+      pull-requests: write
+      contents: read
+
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: 🔤 Read Fly app name
+        id: base_app
+        uses: SebRollen/[email protected]
+        with:
+          file: fly.toml
+          field: app
+
+      - name: 🎈 Setup Fly
+        uses: superfly/flyctl-actions/[email protected]
+
+      - name: 🗑 Destroy preview app
+        shell: bash
+        run: |
+          set -euo pipefail
+          preview_app_name="${{ steps.base_app.outputs.value }}-pr-${{ github.event.pull_request.number }}"
+
+          flyctl apps destroy "${preview_app_name}" --yes || echo "App already removed"
+        env:
+          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
+
+      - name: 💬 Notify pull request
+        uses: peter-evans/create-or-update-comment@v4
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          body: |
+            ♻️ Preview environment `${{ steps.base_app.outputs.value }}-pr-${{ github.event.pull_request.number }}` has been destroyed.

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 .DS_store
+.idea
 
 /build
 .env

README.md

@@ -49,6 +49,21 @@ Want to talk about the Epic Stack in a blog post or talk? Great! Here are some
 assets you can use in your material:
 [EpicWeb.dev/brand](https://epicweb.dev/brand)
 
+## App Branding Configuration
+
+- Update `app/utils/branding.ts` to change the app title, base URL, or email
+  sender (swap the defaults for `import.meta.env.*` / `process.env.*` when
+  you're ready to drive them from environment variables).
+- Set `PREVIEW_BADGE_TEXT` (or `FLY_PREVIEW_PREVIEW_BADGE_TEXT` in the preview
+  workflow) to show a thin banner across the top of the app that reminds people
+  they're viewing a preview deploy.
+
+## E2E Coverage
+
+- Run `npm run test:e2e:run` (or `npm run test:e2e:dev`) and open
+  `coverage/e2e/index.html` to explore the Monocart report and the captured
+  Chromium coverage.
+
 ## Thanks
 
 You rock 🪨

app/components/ui/badge.tsx

@@ -0,0 +1,37 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '#app/utils/misc.tsx'
+
+const badgeVariants = cva(
+	'focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none',
+	{
+		variants: {
+			variant: {
+				default:
+					'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent',
+				secondary:
+					'bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent',
+				destructive:
+					'bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent',
+				outline: 'text-foreground',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+)
+
+export interface BadgeProps
+	extends
+		React.HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+	return (
+		<div className={cn(badgeVariants({ variant }), className)} {...props} />
+	)
+}
+
+export { Badge, badgeVariants }

app/entry.client.tsx

@@ -1,9 +1,10 @@
 import { startTransition } from 'react'
 import { hydrateRoot } from 'react-dom/client'
 import { HydratedRouter } from 'react-router/dom'
+import { init } from './utils/monitoring.client.tsx'
 
 if (ENV.MODE === 'production' && ENV.SENTRY_DSN) {
-	void import('./utils/monitoring.client.tsx').then(({ init }) => init())
+	init()
 }
 
 startTransition(() => {