feat(marketing): load env from monorepo root and add cookie domain default#349
Conversation
…fault - Add dotenv package to load .env from monorepo root in development - Set NEXT_PUBLIC_COOKIE_DOMAIN default to 'localhost' for local development - Load root .env file with override flag to ensure proper environment variable loading
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughLoads development env from the monorepo root via dotenv in development and makes NEXT_PUBLIC_COOKIE_DOMAIN optional with default "localhost". Multiple marketing UI components receive responsive spacing, padding, and label adjustments. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
- Reduce header padding on mobile (px-4 on mobile, scaling up) - Make logo smaller on mobile (h-8 on mobile) - Reduce spacing between elements on mobile - Shorten button text on mobile (Download instead of Download for macOS) - Make PlatformDropdown responsive width on mobile - Reduce social links padding on mobile - Hide Sign In button
🧹 Preview Cleanup CompleteThe following preview resources have been cleaned up:
Thank you for your contribution! 🎉 Preview resources have been processed for cleanup |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (2)
apps/marketing/package.json(1 hunks)apps/marketing/src/env.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx,js,jsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Use Biome for code formatting and linting, running at root level for speed
Files:
apps/marketing/package.jsonapps/marketing/src/env.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Avoid
anytype and prioritize type safety in TypeScript code
Files:
apps/marketing/src/env.ts
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
Repo: superset-sh/superset PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-12T05:45:09.673Z
Learning: Applies to apps/desktop/src/main/index.ts : Load environment variables in apps/desktop/src/main/index.ts with override: true before any imports
📚 Learning: 2025-12-12T05:45:09.672Z
Learnt from: CR
Repo: superset-sh/superset PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-12T05:45:09.672Z
Learning: Applies to packages/ui/**/*.{ts,tsx} : Use React + TailwindCSS v4 + shadcn/ui for UI components in `packages/ui`
Applied to files:
apps/marketing/package.json
📚 Learning: 2025-12-12T05:45:09.673Z
Learnt from: CR
Repo: superset-sh/superset PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-12T05:45:09.673Z
Learning: Applies to apps/desktop/src/main/index.ts : Load environment variables in apps/desktop/src/main/index.ts with override: true before any imports
Applied to files:
apps/marketing/src/env.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: Deploy Marketing
- GitHub Check: Deploy Admin
- GitHub Check: Deploy Web
- GitHub Check: Deploy Docs
- GitHub Check: Deploy API
- GitHub Check: Build
🔇 Additional comments (3)
apps/marketing/src/env.ts (2)
3-4: LGTM!The imports are appropriate for the dotenv loading functionality.
26-26: LGTM! Sensible default for local development.The "localhost" default improves developer experience by eliminating the need to configure cookie domain for local development. Ensure production deployments still explicitly set NEXT_PUBLIC_COOKIE_DOMAIN to the appropriate domain.
apps/marketing/package.json (1)
41-41: Dotenv version is valid and secure.Version 17.2.3 exists on the npm registry with no known security vulnerabilities reported.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
apps/marketing/src/env.ts (1)
7-10: Use__dirnameinstead ofprocess.cwd()for reliable path resolution.The dotenv path should resolve relative to this file's location, not the current working directory. Replace
resolve(process.cwd(), "../../.env")withresolve(__dirname, "../../.env")to ensure the monorepo root .env is loaded consistently regardless of how the dev server is started.Based on learnings, this matches the pattern from the desktop app where environment variables should be loaded with reliable path resolution.
Apply this diff:
- config({ path: resolve(process.cwd(), "../../.env"), override: true }); + config({ path: resolve(__dirname, "../../.env"), override: true });
🧹 Nitpick comments (1)
apps/marketing/src/app/components/CTAButtons/CTAButtons.tsx (1)
17-18: Consider a clearer abbreviation than "Dash".The abbreviation "Dash" for "Dashboard" may not be immediately clear to users on small viewports. Consider alternatives like "App" or keeping the full word if space permits.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/marketing/src/app/components/CTAButtons/CTAButtons.tsx(1 hunks)apps/marketing/src/app/components/DownloadButton/DownloadButton.tsx(2 hunks)apps/marketing/src/app/components/Header/Header.tsx(2 hunks)apps/marketing/src/app/components/PlatformDropdown/PlatformDropdown.tsx(1 hunks)apps/marketing/src/app/components/SocialLinks/SocialLinks.tsx(2 hunks)apps/marketing/src/env.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx,js,jsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Use Biome for code formatting and linting, running at root level for speed
Files:
apps/marketing/src/app/components/PlatformDropdown/PlatformDropdown.tsxapps/marketing/src/app/components/Header/Header.tsxapps/marketing/src/app/components/DownloadButton/DownloadButton.tsxapps/marketing/src/env.tsapps/marketing/src/app/components/SocialLinks/SocialLinks.tsxapps/marketing/src/app/components/CTAButtons/CTAButtons.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Avoid
anytype and prioritize type safety in TypeScript code
Files:
apps/marketing/src/app/components/PlatformDropdown/PlatformDropdown.tsxapps/marketing/src/app/components/Header/Header.tsxapps/marketing/src/app/components/DownloadButton/DownloadButton.tsxapps/marketing/src/env.tsapps/marketing/src/app/components/SocialLinks/SocialLinks.tsxapps/marketing/src/app/components/CTAButtons/CTAButtons.tsx
**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/components/**/*.{ts,tsx}: Structure project folders as one folder per component with PascalCase naming (ComponentName/ComponentName.tsx + index.ts barrel export)
Co-locate component dependencies (utils, hooks, constants, config, tests, stories) next to the file using them
Use one component per file (no multi-component files)
Files:
apps/marketing/src/app/components/PlatformDropdown/PlatformDropdown.tsxapps/marketing/src/app/components/Header/Header.tsxapps/marketing/src/app/components/DownloadButton/DownloadButton.tsxapps/marketing/src/app/components/SocialLinks/SocialLinks.tsxapps/marketing/src/app/components/CTAButtons/CTAButtons.tsx
🧠 Learnings (3)
📚 Learning: 2025-12-12T05:45:09.673Z
Learnt from: CR
Repo: superset-sh/superset PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-12T05:45:09.673Z
Learning: Applies to **/components/{ui,ai-elements,react-flow}/**/*.{ts,tsx} : For shadcn/ui components, use kebab-case single files (e.g., button.tsx) in src/components/ui/, src/components/ai-elements, and src/components/react-flow/ directories
Applied to files:
apps/marketing/src/app/components/DownloadButton/DownloadButton.tsxapps/marketing/src/app/components/CTAButtons/CTAButtons.tsx
📚 Learning: 2025-12-12T05:45:09.673Z
Learnt from: CR
Repo: superset-sh/superset PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-12T05:45:09.673Z
Learning: Applies to apps/desktop/src/main/index.ts : Load environment variables in apps/desktop/src/main/index.ts with override: true before any imports
Applied to files:
apps/marketing/src/env.ts
📚 Learning: 2025-11-24T21:33:13.267Z
Learnt from: CR
Repo: superset-sh/superset PR: 0
File: apps/desktop/AGENTS.md:0-0
Timestamp: 2025-11-24T21:33:13.267Z
Learning: Applies to apps/desktop/**/*.{ts,tsx} : Please use alias as defined in `tsconfig.json` when possible
Applied to files:
apps/marketing/src/env.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: Deploy Web
- GitHub Check: Deploy API
- GitHub Check: Deploy Marketing
- GitHub Check: Deploy Admin
- GitHub Check: Deploy Docs
- GitHub Check: Build
🔇 Additional comments (8)
apps/marketing/src/app/components/SocialLinks/SocialLinks.tsx (1)
14-14: LGTM! Responsive padding refinement.The updated padding classes provide tighter spacing on small viewports while maintaining comfortable touch targets on larger screens, consistent with the responsive UI improvements across this PR.
Also applies to: 32-32
apps/marketing/src/app/components/PlatformDropdown/PlatformDropdown.tsx (1)
43-45: LGTM! Responsive dropdown positioning and sizing.The offset props fine-tune alignment with the trigger, and the responsive width ensures the dropdown adapts gracefully across viewport sizes. The
calc(100vw-2rem)correctly accounts for horizontal margins on mobile while reverting to a fixed width on larger screens.apps/marketing/src/app/components/DownloadButton/DownloadButton.tsx (2)
19-21: LGTM! Responsive size classes.The updated padding and text sizing provide tighter spacing on mobile while maintaining comfortable proportions on larger screens, consistent with the responsive design improvements throughout this PR.
96-97: LGTM! Responsive label rendering.The split-span approach adapts the button label for smaller viewports while preserving clarity on larger screens. This matches the pattern used in CTAButtons.tsx.
apps/marketing/src/env.ts (1)
26-26: LGTM! Appropriate default for local development.The default value of "localhost" for
NEXT_PUBLIC_COOKIE_DOMAINcorrectly supports local development without requiring explicit configuration, aligning with the PR's objective to simplify the development setup.apps/marketing/src/app/components/CTAButtons/CTAButtons.tsx (2)
12-12: LGTM! Responsive spacing refinements.The tighter gaps and padding on smaller viewports improve the mobile experience while maintaining comfortable spacing on larger screens, consistent with the responsive design improvements across this PR.
Also applies to: 15-15, 22-22, 33-33, 42-42
24-25: LGTM! Responsive label rendering for download action.The split-span approach provides a concise label on mobile while maintaining clarity on desktop, matching the pattern in DownloadButton.tsx.
Also applies to: 44-45
apps/marketing/src/app/components/Header/Header.tsx (1)
15-15: LGTM! Comprehensive responsive header refinements.The stepped responsive scaling for padding, logo size, and gaps provides excellent adaptation across viewport sizes. The additional
mdbreakpoint offers finer control over the transition from mobile to desktop layouts, consistent with the responsive design improvements throughout this PR.Also applies to: 30-30, 36-36
|
|
||
| if (process.env.NODE_ENV === "development") { | ||
| // Load .env from monorepo root | ||
| config({ path: resolve(__dirname, "../../.env"), override: true }); |
There was a problem hiding this comment.
@saddlepaddle fyi I just have this load .env from root. I think it's annoying to have more than 1 especially as an open-source monorepo
There was a problem hiding this comment.
tru we can do that too! i have direnv set up fyi, but this is reasonable too to add to each project 👍🏼
| <a | ||
| href={`${env.NEXT_PUBLIC_WEB_URL}/sign-in`} | ||
| className="px-4 py-2 text-sm font-normal text-muted-foreground hover:text-foreground transition-colors" | ||
| className="hidden px-2 sm:px-4 py-2 text-sm font-normal text-muted-foreground hover:text-foreground transition-colors" |
There was a problem hiding this comment.
@saddlepaddle fyi hiding this because it is not functional and can cause confusion
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/marketing/src/env.ts (1)
29-38: Avoid defaultingNEXT_PUBLIC_COOKIE_DOMAINtolocalhostin production.
As written, a missing prod value will silently become"localhost", which is very likely wrong and hard to notice.A safer pattern is: keep the client schema optional, and only default to
"localhost"in development when wiringexperimental__runtimeEnv:client: { NEXT_PUBLIC_API_URL: z.string().url(), NEXT_PUBLIC_WEB_URL: z.string().url(), NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string(), - NEXT_PUBLIC_COOKIE_DOMAIN: z.string().default("localhost"), + NEXT_PUBLIC_COOKIE_DOMAIN: z.string().optional(), }, experimental__runtimeEnv: { NODE_ENV: process.env.NODE_ENV, NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL, NEXT_PUBLIC_WEB_URL: process.env.NEXT_PUBLIC_WEB_URL, NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, - NEXT_PUBLIC_COOKIE_DOMAIN: process.env.NEXT_PUBLIC_COOKIE_DOMAIN, + NEXT_PUBLIC_COOKIE_DOMAIN: + process.env.NEXT_PUBLIC_COOKIE_DOMAIN ?? + (process.env.NODE_ENV === "development" ? "localhost" : undefined), },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/marketing/src/env.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx,js,jsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Use Biome for code formatting and linting, running at root level for speed
Files:
apps/marketing/src/env.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Avoid
anytype and prioritize type safety in TypeScript code
Files:
apps/marketing/src/env.ts
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
Repo: superset-sh/superset PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-12T05:45:09.672Z
Learning: Applies to **/components/**/*.{ts,tsx} : Co-locate component dependencies (utils, hooks, constants, config, tests, stories) next to the file using them
Learnt from: CR
Repo: superset-sh/superset PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-12T05:45:09.673Z
Learning: Applies to apps/desktop/src/main/index.ts : Load environment variables in apps/desktop/src/main/index.ts with override: true before any imports
📚 Learning: 2025-12-12T05:45:09.673Z
Learnt from: CR
Repo: superset-sh/superset PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-12T05:45:09.673Z
Learning: Applies to apps/desktop/src/main/index.ts : Load environment variables in apps/desktop/src/main/index.ts with override: true before any imports
Applied to files:
apps/marketing/src/env.ts
📚 Learning: 2025-11-24T21:33:13.267Z
Learnt from: CR
Repo: superset-sh/superset PR: 0
File: apps/desktop/AGENTS.md:0-0
Timestamp: 2025-11-24T21:33:13.267Z
Learning: Applies to apps/desktop/**/*.{ts,tsx} : Please use alias as defined in `tsconfig.json` when possible
Applied to files:
apps/marketing/src/env.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: Deploy Marketing
- GitHub Check: Deploy Web
- GitHub Check: Deploy Docs
- GitHub Check: Deploy Admin
- GitHub Check: Deploy API
- GitHub Check: Build
| import { dirname, resolve } from "node:path"; | ||
| import { fileURLToPath } from "node:url"; | ||
| import { createEnv } from "@t3-oss/env-nextjs"; | ||
| import { vercel } from "@t3-oss/env-nextjs/presets-zod"; | ||
| import { config } from "dotenv"; | ||
| import { z } from "zod"; | ||
|
|
||
| const __dirname = dirname(fileURLToPath(import.meta.url)); | ||
|
|
||
| if (process.env.NODE_ENV === "development") { | ||
| // Load .env from monorepo root | ||
| config({ path: resolve(__dirname, "../../.env"), override: true }); | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# 1. Find the monorepo structure and .env file locations
find . -maxdepth 3 -name ".env*" -type f 2>/dev/null | head -20Repository: superset-sh/superset
Length of output: 78
🏁 Script executed:
# 2. Check the directory structure to confirm path resolution
ls -la apps/marketing/src/ 2>/dev/null | head -20
ls -la apps/ 2>/dev/nullRepository: superset-sh/superset
Length of output: 836
🏁 Script executed:
# 3. Search for imports of env.ts in the apps/marketing directory
rg -n 'from\s+["\x27].*env(\.ts)?["\x27]|import.*env' apps/marketing --type ts --type tsx -A 2Repository: superset-sh/superset
Length of output: 91
🏁 Script executed:
# 4. Check if any files importing env.ts have "use client" directive
rg -l 'use client' apps/marketing --type ts --type tsx | xargs -I {} bash -c 'echo "=== {} ==="; rg "from.*env|import.*env" {} --type ts --type tsx'Repository: superset-sh/superset
Length of output: 91
🏁 Script executed:
# 5. Verify the actual .env path by checking if files exist
realpath apps/marketing/src/env.ts 2>/dev/null && echo "---" && ls -la ../.env 2>/dev/null; ls -la ../../.env 2>/dev/null; ls -la ../../../.env 2>/dev/nullRepository: superset-sh/superset
Length of output: 46
🏁 Script executed:
# Search for imports of env.ts with proper syntax
rg -n 'from.*["\x27].*env(\.ts)?["\x27]|import.*\{.*env' apps/marketing -A 2 -B 1Repository: superset-sh/superset
Length of output: 989
🏁 Script executed:
# Look for "use client" directives and subsequent imports
rg -l 'use client' apps/marketing | head -10Repository: superset-sh/superset
Length of output: 639
🏁 Script executed:
# Check the actual .env loading context - is this in a server-only file?
cat apps/marketing/src/env.tsRepository: superset-sh/superset
Length of output: 1329
🏁 Script executed:
# Find all TypeScript files in apps/marketing that import env
find apps/marketing -name "*.ts" -o -name "*.js" | xargs grep -l "from.*env" 2>/dev/nullRepository: superset-sh/superset
Length of output: 89
🏁 Script executed:
# Check if layout.tsx is a server component or has use client
head -20 apps/marketing/src/app/layout.tsxRepository: superset-sh/superset
Length of output: 679
🏁 Script executed:
# Check CTAButtons to see if it's server or client
head -15 apps/marketing/src/app/components/CTAButtons/CTAButtons.tsxRepository: superset-sh/superset
Length of output: 561
🏁 Script executed:
# Verify path resolution more precisely
python3 << 'EOF'
import os
from pathlib import Path
# Simulate the __dirname value
file_path = Path("apps/marketing/src/env.ts").resolve()
dirname_value = file_path.parent # apps/marketing/src
# Current resolution: ../../.env
resolved_current = (dirname_value / "../../.env").resolve()
print(f"Current path (../../.env): {resolved_current}")
# Proposed resolution: ../../../.env
resolved_proposed = (dirname_value / "../../../.env").resolve()
print(f"Proposed path (../../../.env): {resolved_proposed}")
# Show what's actually present
repo_root = Path(".").resolve()
print(f"\nRepo root: {repo_root}")
print(f"Files at repo root: {[f.name for f in repo_root.glob('.env*')]}")
EOFRepository: superset-sh/superset
Length of output: 150
🏁 Script executed:
# Check what files exist in apps directory
find apps -maxdepth 1 -type f -name ".env*" 2>/dev/nullRepository: superset-sh/superset
Length of output: 46
🏁 Script executed:
# Verify the monorepo .env location more carefully
find . -maxdepth 2 -name ".env" -type f 2>/dev/null
ls -la .env* 2>/dev/null || echo "No .env files at repo root"Repository: superset-sh/superset
Length of output: 124
Fix incorrect .env path and remove unsafe cookie domain default.
The path resolve(__dirname, "../../.env") resolves to apps/.env, not the monorepo root. Use ../../../.env instead:
- config({ path: resolve(__dirname, "../../.env"), override: true });
+ config({ path: resolve(__dirname, "../../../.env"), override: true });Additionally, NEXT_PUBLIC_COOKIE_DOMAIN defaults to "localhost" in the client schema, causing silent misconfiguration in production if the variable is omitted. Either require it explicitly or make the default conditional to development.
🤖 Prompt for AI Agents
In apps/marketing/src/env.ts around lines 1-13, the dotenv path currently uses
resolve(__dirname, "../../.env") which points to apps/.env instead of the
monorepo root; change it to resolve(__dirname, "../../../.env") so it loads the
root .env. Also remove the unsafe client-side default for
NEXT_PUBLIC_COOKIE_DOMAIN (currently "localhost"): update the env schema to
either make NEXT_PUBLIC_COOKIE_DOMAIN required (no default) or supply a default
only when process.env.NODE_ENV === "development" so production cannot silently
run with the wrong domain.
2 participants
Changes
Why
This ensures the marketing app can properly load environment variables from the monorepo root .env file during development, matching the pattern used in other apps in the monorepo.
Summary by CodeRabbit
Chores
Style
Bug Fixes
✏️ Tip: You can customize this high-level summary in your review settings.