Build time validation for client env

waspc/data/Generator/templates/react-app/vite.config.ts

@@ -4,6 +4,7 @@ import { mergeConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { defaultExclude } from "vitest/config"
 import { detectServerImports } from "./vite/detectServerImports"
+import { validateEnv } from "./vite/validateEnv.js";
 
 {=# customViteConfig.isDefined =}
 // Ignoring the TS error because we are importing a file outside of TS root dir.
@@ -17,6 +18,7 @@ const _waspUserProvidedConfig = {};
 const defaultViteConfig = {
   base: "{= baseDir =}",
   plugins: [
+    validateEnv(),
     react(),
     detectServerImports(),
   ],

waspc/data/Generator/templates/react-app/vite/validateEnv.ts

@@ -0,0 +1,50 @@
+import { type Plugin, loadEnv } from 'vite'
+
+import {
+  getValidatedEnvOrError,
+  type EnvValidationResult,
+} from 'wasp/env/validation'
+import { clientEnvSchema } from 'wasp/client/env/schema'
+
+const redColor = '\x1b[31m'
+
+export function validateEnv(): Plugin {
+  let validationResult: EnvValidationResult<unknown> | null = null
+  return {
+    name: 'wasp-validate-env',
+    configResolved: (config) => {
+      const env = loadEnv(config.mode, process.cwd(), config.envPrefix)
+
+      validationResult = getValidatedEnvOrError(env, clientEnvSchema)
+
+      if (validationResult.type !== 'error') {
+        return
+      }
+
+      if (config.command !== 'build') {
+        return
+      }
+
+      console.error(`${redColor}${validationResult.message}`)
+      // Exit early if we are in build mode, because we can't show the error in the browser.
+      process.exit(1)
+    },
+    configureServer: (server) => {
+      if (validationResult === null || validationResult.type !== 'error') {
+        return
+      }
+
+      // Send the error to the browser.
+      const message = validationResult.message
+      server.ws.on('connection', () => {
+        server.ws.send({
+          type: 'error',
+          err: {
+            message,
+            stack: '',
+          },
+        })
+      })
+    },
+  }
+}

waspc/data/Generator/templates/sdk/wasp/client/env.ts

@@ -1,25 +1,5 @@
-{{={= =}=}}
-import * as z from 'zod'
-
+import { clientEnvSchema } from './env/schema.js'
 import { ensureEnvSchema } from '../env/validation.js'
 
-{=# envValidationSchema.isDefined =}
-{=& envValidationSchema.importStatement =}
-const userClientEnvSchema = {= envValidationSchema.importIdentifier =}
-{=/ envValidationSchema.isDefined =}
-{=^ envValidationSchema.isDefined =}
-const userClientEnvSchema = z.object({})
-{=/ envValidationSchema.isDefined =}
-
-const waspClientEnvSchema = z.object({
-  REACT_APP_API_URL: z
-    .string({
-      required_error: 'REACT_APP_API_URL is required',
-    })
-    .default('{= defaultServerUrl =}')
-})
-
-const clientEnvSchema = userClientEnvSchema.merge(waspClientEnvSchema)
-
 // PUBLIC API
 export const env = ensureEnvSchema(import.meta.env, clientEnvSchema)

waspc/data/Generator/templates/sdk/wasp/client/env/schema.ts

@@ -0,0 +1,22 @@
+{{={= =}=}}
+import * as z from 'zod'
+
+{=# envValidationSchema.isDefined =}
+{=& envValidationSchema.importStatement =}
+const userClientEnvSchema = {= envValidationSchema.importIdentifier =}
+{=/ envValidationSchema.isDefined =}
+{=^ envValidationSchema.isDefined =}
+const userClientEnvSchema = z.object({})
+{=/ envValidationSchema.isDefined =}
+
+const waspClientEnvSchema = z.object({
+  REACT_APP_API_URL: z
+  .string()
+  .url({
+    message: 'REACT_APP_API_URL must be a valid URL',
+  })
+  .default('{= defaultServerUrl =}'),
+})
+
+// PRIVATE API (sdk, Vite config)
+export const clientEnvSchema = userClientEnvSchema.merge(waspClientEnvSchema)

waspc/data/Generator/templates/sdk/wasp/env/index.ts

@@ -7,5 +7,3 @@ export function defineEnvValidationSchema<Schema extends z.ZodObject<any>>(
   return schema
 }
 
-// PRIVATE API (SDK, Vite config)
-export { ensureEnvSchema } from './validation.js'

waspc/data/Generator/templates/sdk/wasp/env/validation.ts

@@ -2,12 +2,43 @@ import * as z from 'zod'
 
 const redColor = '\x1b[31m'
 
+// PRIVATE API (SDK, Vite config)
 export function ensureEnvSchema<Schema extends z.ZodTypeAny>(
   data: unknown,
   schema: Schema
 ): z.infer<Schema> {
+  const result = getValidatedEnvOrError(data, schema)
+  switch (result.type) {
+    case 'error':
+      console.error(`${redColor}${result.message}`)
+      throw new Error('Error parsing environment variables')
+    case 'success':
+      return result.env
+    default:
+      result satisfies never;
+  }
+}
+
+// PRIVATE API (Vite config)
+export type EnvValidationResult<Env> = {
+  type: 'error',
+  message: string,
+} | {
+  type: 'success',
+  env: Env,
+}
+
+// PRIVATE API (SDK, Vite config)
+export function getValidatedEnvOrError<Schema extends z.ZodTypeAny>(
+  env: unknown,
+  schema: Schema
+): EnvValidationResult<z.infer<Schema>> {
   try {
-    return schema.parse(data)
+    const validatedEnv = schema.parse(env)
+    return {
+      type: 'success',
+      env: validatedEnv,
+    }
   } catch (e) {
     if (e instanceof z.ZodError) {
       const errorOutput = ['', '══ Env vars validation failed ══', '']
@@ -16,10 +47,15 @@ export function ensureEnvSchema<Schema extends z.ZodTypeAny>(
       }
       errorOutput.push('')
       errorOutput.push('════════════════════════════════')
-      console.error(redColor, errorOutput.join('\n'))
-      throw new Error('Error parsing environment variables')
+      return {
+        type: 'error',
+        message: errorOutput.join('\n'),
+      }
     } else {
-      throw e
+      return {
+        type: 'error',
+        message: e.message,
+      }
     }
   }
 }

waspc/data/Generator/templates/sdk/wasp/package.json

@@ -110,6 +110,10 @@
       "./client": "./dist/client/index.js",
       "./dev": "./dist/dev/index.js",
       "./env": "./dist/env/index.js",
+      {=! Private: [client] =}
+      "./env/validation": "./dist/env/validation.js",
+      {=! Private: [client, sdk] =}
+      "./client/env/schema": "./dist/client/env/schema.js",
 
       {=! todo(filip): Fixes below are for type errors in 0.13.1, remove ASAP =}
       {=! Used by our code (SDK for full-stack type safety), uncodumented (but accessible) for users. =}