feat: multi-stage docker image, migrations container, 96.35% smaller

.dockerignore

@@ -1,8 +1,53 @@
-LICENSE
-ROADMAP.md
-README.md
+# dependencies
+/node_modules
+/apps/*/node_modules
+/packages/*/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# 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*
+bun-debug.log*
+# env files (can opt-in for committing if needed)
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# ide
+.idea
+.vscode
+.turbo
+i18n.cache
+apps/mail/scripts.ts
 .gitignore
 .husky
 .github
 .devcontainer
-.env.example
+.env.example

README.md

@@ -70,7 +70,7 @@ You can set up Zero in two ways:
    bun install
 
    # Start database locally
-   bun docker:up
+   bun docker:db:up
    ```
 
 2. **Set Up Environment**
@@ -81,7 +81,7 @@ You can set up Zero in two ways:
      ```
    - Configure your environment variables (see below)
    - Setup cloudflare with `bun run cf-install`, you will need to run this everytime there is a `.env` change
-   - Start the database with the provided docker compose setup: `bun docker:up`
+   - Start the database with the provided docker compose setup: `bun docker:db:up`
    - Initialize the database: `bun db:push`
 
 3. **Start the App**
@@ -211,7 +211,7 @@ Zero uses PostgreSQL for storing data. Here's how to set it up:
    Run this command to start a local PostgreSQL instance:
 
    ```bash
-   bun docker:up
+   bun docker:db:up
    ```
 
    This creates a database with:

apps/mail/app/(auth)/login/login-client.tsx

@@ -10,7 +10,7 @@ import { TriangleAlert } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import { toast } from 'sonner';
-import Link from 'next/link';
+import { env } from '@/lib/env';
 
 interface EnvVarStatus {
   name: string;
@@ -121,7 +121,7 @@ function LoginClientContent({ providers, isProd }: LoginClientProps) {
       toast.promise(
         signIn.social({
           provider: provider.id as any,
-          callbackURL: `${process.env.NEXT_PUBLIC_APP_URL}/mail`,
+          callbackURL: `${env.NEXT_PUBLIC_APP_URL}/mail`,
         }),
         {
           error: 'Login redirect failed',

apps/mail/app/(auth)/login/page.tsx

@@ -1,24 +1,28 @@
 import { authProviders, customProviders, isProviderEnabled } from '@zero/server/auth-providers';
 import { LoginClient } from './login-client';
+import { env } from '@/lib/env';
 
 export default function LoginPage() {
-  const envNodeEnv = process.env.NODE_ENV;
+  const envNodeEnv = env.NODE_ENV;
   const isProd = envNodeEnv === 'production';
 
-  const authProviderStatus = authProviders(process.env as Record<string, string>).map(
+  const authProviderStatus = authProviders(env as unknown as Record<string, string>).map(
     (provider) => {
       const envVarStatus =
-        provider.envVarInfo?.map((envVar) => ({
-          name: envVar.name,
-          set: !!process.env[envVar.name],
-          source: envVar.source,
-          defaultValue: envVar.defaultValue,
-        })) || [];
+        provider.envVarInfo?.map((envVar) => {
+          const envVarName = envVar.name as keyof typeof env;
+          return {
+            name: envVar.name,
+            set: !!env[envVarName],
+            source: envVar.source,
+            defaultValue: envVar.defaultValue,
+          };
+        }) || [];
 
       return {
         id: provider.id,
         name: provider.name,
-        enabled: isProviderEnabled(provider, process.env as Record<string, string>),
+        enabled: isProviderEnabled(provider, env as Record<string, string>),
         required: provider.required,
         envVarInfo: provider.envVarInfo,
         envVarStatus,

apps/mail/app/(routes)/settings/connections/page.tsx

@@ -24,6 +24,7 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
+import { env } from '@/lib/env';
 import Image from 'next/image';
 import { toast } from 'sonner';
 
@@ -147,7 +148,7 @@ export default function ConnectionsPage() {
                           onClick={async () => {
                             await authClient.linkSocial({
                               provider: connection.providerId,
-                              callbackURL: `${process.env.NEXT_PUBLIC_APP_URL}/settings/connections`,
+                              callbackURL: `${env.NEXT_PUBLIC_APP_URL}/settings/connections`,
                             });
                           }}
                         >

apps/mail/app/layout.tsx

@@ -2,6 +2,7 @@ import { ClientProviders } from '@/providers/client-providers';
 import { ServerProviders } from '@/providers/server-providers';
 import { SpeedInsights } from '@vercel/speed-insights/next';
 import { Geist, Geist_Mono } from 'next/font/google';
+import { PublicEnvScript } from 'next-runtime-env';
 import { siteConfig } from '@/lib/site-config';
 import type { PropsWithChildren } from 'react';
 import type { Viewport } from 'next';
@@ -33,6 +34,7 @@ export default async function RootLayout({ children }: PropsWithChildren) {
     <html suppressHydrationWarning>
       <head>
         <Script src="https://unpkg.com/web-streams-polyfill/dist/polyfill.js" />
+        <PublicEnvScript />
       </head>
       <body className={cn(geistSans.variable, geistMono.variable, 'antialiased')}>
         <ServerProviders>

apps/mail/app/og-api/home/route.tsx

@@ -1,4 +1,6 @@
 import { ImageResponse } from 'next/og';
+import { env } from '@/lib/env';
+
 export const runtime = 'edge';
 
 export async function GET() {
@@ -18,7 +20,7 @@ export async function GET() {
   }
 
   try {
-    const appUrl = process.env.NEXT_PUBLIC_APP_URL;
+    const appUrl = NEXT_PUBLIC_APP_URL;
     if (!appUrl) {
       throw new Error('NEXT_PUBLIC_APP_URL is not defined');
     }
@@ -27,7 +29,7 @@ export async function GET() {
     if (!mailResponse.ok) {
       throw new Error('Failed to fetch SVG');
     }
-    
+
     const mailBuffer = await mailResponse.arrayBuffer();
     const mailBase64 = btoa(String.fromCharCode(...new Uint8Array(mailBuffer)));
     const mail = `data:image/svg+xml;base64,${mailBase64}`;
@@ -52,7 +54,10 @@ export async function GET() {
               <span tw="text-[#A1A1A1]">is here</span>
             </div>
 
-            <div tw="text-[36px] text-center text-neutral-400 mt-10" style={{ fontFamily: 'light' }}>
+            <div
+              tw="text-[36px] text-center text-neutral-400 mt-10"
+              style={{ fontFamily: 'light' }}
+            >
               Experience email the way you want with 0 - the first open source email app that puts
               your privacy and safety first.
             </div>

apps/mail/components/connection/add.tsx

@@ -15,6 +15,7 @@ import { useTranslations } from 'next-intl';
 import { Button } from '../ui/button';
 import { motion } from 'motion/react';
 import { cn } from '@/lib/utils';
+import { env } from '@/lib/env';
 import { useMemo } from 'react';
 
 export const AddConnectionDialog = ({
@@ -110,7 +111,7 @@ export const AddConnectionDialog = ({
                 onClick={async () =>
                   await authClient.linkSocial({
                     provider: provider.providerId,
-                    callbackURL: `${process.env.NEXT_PUBLIC_APP_URL}/${pathname}`,
+                    callbackURL: `${env.NEXT_PUBLIC_APP_URL}/${pathname}`,
                   })
                 }
               >

apps/mail/components/create/ai-chat.tsx

@@ -22,6 +22,7 @@ import { format } from 'date-fns-tz';
 import { useQueryState } from 'nuqs';
 import { Input } from '../ui/input';
 import { useState } from 'react';
+import { env } from '@/lib/env';
 import VoiceChat from './voice';
 import Image from 'next/image';
 import { toast } from 'sonner';
@@ -142,7 +143,7 @@ export function AIChat() {
   const { attach, track, refetch: refetchBilling } = useBilling();
 
   const { messages, input, setInput, error, handleSubmit, status, stop } = useChat({
-    api: `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/chat`,
+    api: `${env.NEXT_PUBLIC_BACKEND_URL}/api/chat`,
     fetch: (url, options) => fetch(url, { ...options, credentials: 'include' }),
     maxSteps: 5,
     body: {

apps/mail/components/create/voice.tsx

@@ -17,6 +17,9 @@ import { useSession } from '@/lib/auth-client';
 import type { Sender } from '@/types';
 import dedent from 'dedent';
 
+// Utils
+import { env } from '@/lib/env';
+
 interface EmailContent {
   metadata: {
     isUnread: boolean;
@@ -129,7 +132,7 @@ const VoiceChat = ({ onClose }: VoiceChatProps) => {
       const emailContext = emailContent.join('\n\n');
 
       const conversationId = await conversation.startSession({
-        agentId: process.env.NEXT_PUBLIC_ELEVENLABS_AGENT_ID!,
+        agentId: env.NEXT_PUBLIC_ELEVENLABS_AGENT_ID,
         dynamicVariables: {
           user_name: userName,
           email_context: emailContext,

apps/mail/components/party.tsx

@@ -5,6 +5,7 @@ import { usePartySocket } from 'partysocket/react';
 import { useThreads } from '@/hooks/use-threads';
 import { useLabels } from '@/hooks/use-labels';
 import { useSession } from '@/lib/auth-client';
+import { env } from '@/lib/env';
 import { funnel } from 'remeda';
 
 const DEBOUNCE_DELAY = 10_000; // 10 seconds is appropriate for real-time notifications
@@ -36,7 +37,7 @@ export const NotificationProvider = ({ headers }: { headers: Record<string, stri
     query: {
       token: headers['cookie'],
     },
-    host: process.env.NEXT_PUBLIC_BACKEND_URL!,
+    host: env.NEXT_PUBLIC_BACKEND_URL,
     onMessage: async (message: MessageEvent<string>) => {
       console.warn('party message', message);
       const [threadId, type] = message.data.split(':');

apps/mail/instrumentation.ts

@@ -1,11 +1,12 @@
 import * as Sentry from '@sentry/nextjs';
+import { env } from '@/lib/env';
 
 export async function register() {
-  if (process.env.NEXT_RUNTIME === 'nodejs') {
+  if (env.NEXT_RUNTIME === 'nodejs') {
     await import('./sentry.server.config');
   }
 
-  if (process.env.NEXT_RUNTIME === 'edge') {
+  if (env.NEXT_RUNTIME === 'edge') {
     await import('./sentry.edge.config');
   }
 }

apps/mail/lib/auth-client.ts

@@ -1,9 +1,10 @@
 import { customSessionClient } from 'better-auth/client/plugins';
 import { createAuthClient } from 'better-auth/react';
 import type { Auth } from '@zero/server/auth';
+import { env } from '@/lib/env';
 
 export const authClient = createAuthClient({
-  baseURL: process.env.NEXT_PUBLIC_BACKEND_URL,
+  baseURL: env.NEXT_PUBLIC_BACKEND_URL,
   fetchOptions: {
     credentials: 'include',
   },

apps/mail/lib/constants.ts

@@ -1,3 +1,5 @@
+import { env } from '@/lib/env';
+
 export const I18N_LOCALE_COOKIE_NAME = 'i18n:locale';
 export const SIDEBAR_COOKIE_NAME = 'sidebar:state';
 export const AI_SIDEBAR_COOKIE_NAME = 'ai-sidebar:state';
@@ -6,7 +8,7 @@ export const SIDEBAR_WIDTH = '14rem';
 export const SIDEBAR_WIDTH_MOBILE = '14rem';
 export const SIDEBAR_WIDTH_ICON = '3rem';
 export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
-export const BASE_URL = process.env.NEXT_PUBLIC_APP_URL;
+export const BASE_URL = env.NEXT_PUBLIC_APP_URL;
 export const MAX_URL_LENGTH = 2000;
 export const CACHE_BURST_KEY = 'cache-burst:v0.0.2';