Build time validation for client env

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

@@ -1,9 +1,12 @@
 {{={= =}=}}
 /// <reference types="vitest" />
-import { mergeConfig } from "vite";
+import { mergeConfig, type Plugin, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
 import { defaultExclude } from "vitest/config"
 
+import { ensureEnvSchema } from 'wasp/dev'
+import { clientEnvSchema } from 'wasp/client/env/schema'
+
 {=# customViteConfig.isDefined =}
 // Ignoring the TS error because we are importing a file outside of TS root dir.
 // @ts-ignore
@@ -16,7 +19,10 @@ const _waspUserProvidedConfig = {};
 
 const defaultViteConfig = {
   base: "{= baseDir =}",
-  plugins: [react()],
+  plugins: [
+    react(),
+    validateEnv(),
+  ],
   optimizeDeps: {
     exclude: ['wasp']
   },
@@ -53,3 +59,13 @@ export default mergeConfig(
   defaultViteConfig,
   _waspUserProvidedConfig
 );
+
+function validateEnv(): Plugin {
+  return {
+    name: 'wasp-validate-env',
+    config: (config) => {
+      const env = loadEnv(config.mode, process.cwd(), config.envPrefix)
+      ensureEnvSchema(env, clientEnvSchema)
+    },
+  };
+}

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

@@ -1,14 +1,4 @@
-{{={= =}=}}
-import * as z from 'zod'
-
 import { ensureEnvSchema } from '../env/index.js'
-
-const clientEnvSchema = z.object({
-  REACT_APP_API_URL: z
-    .string({
-      required_error: 'REACT_APP_API_URL is required',
-    })
-    .default('{= defaultServerUrl =}')
-})
+import { clientEnvSchema } from './env/schema.js'
 
 export const env = ensureEnvSchema(import.meta.env, clientEnvSchema)

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

@@ -0,0 +1,12 @@
+{{={= =}=}}
+import * as z from 'zod'
+
+// PRIVATE API (SDK, Vite config)
+export const clientEnvSchema = z.object({
+  REACT_APP_API_URL: z
+    .string()
+    .url({
+      message: 'REACT_APP_API_URL must be a valid URL',
+    })
+    .default('{= defaultServerUrl =}'),
+})

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

@@ -15,3 +15,5 @@ import { join as joinPaths } from 'path'
 export function resolveProjectPath(path: string): string {
   return joinPaths('../../../', path)
 }
+
+export { ensureEnvSchema } from '../env/index.js'

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

@@ -108,6 +108,7 @@
       "./client/router": "./dist/client/router/index.js",
       "./client/test": "./dist/client/test/index.js",
       "./client": "./dist/client/index.js",
+      "./client/env/schema": "./dist/client/env/schema.js",
       "./dev": "./dist/dev/index.js",
 
       {=! todo(filip): Fixes below are for type errors in 0.13.1, remove ASAP =}

waspc/src/Wasp/Generator/SdkGenerator/EnvValidation.hs

@@ -24,7 +24,8 @@ genEnvValidation :: AppSpec -> Generator [FileDraft]
 genEnvValidation spec =
   sequence
     [ genServerEnv spec,
-      genClientEnv,
+      genClientEnvSchema,
+      genFileCopy [relfile|client/env.ts|],
       genFileCopy [relfile|env/index.ts|]
     ]
   where
@@ -49,10 +50,10 @@ genServerEnv spec = return $ C.mkTmplFdWithData tmplPath tmplData
     maybeEmailSender = AS.App.emailSender app
     app = snd $ getApp spec
 
-genClientEnv :: Generator FileDraft
-genClientEnv = return $ C.mkTmplFdWithData tmplPath tmplData
+genClientEnvSchema :: Generator FileDraft
+genClientEnvSchema = return $ C.mkTmplFdWithData tmplPath tmplData
   where
-    tmplPath = [relfile|client/env.ts|]
+    tmplPath = [relfile|client/env/schema.ts|]
     tmplData = object ["defaultServerUrl" .= Server.defaultDevServerUrl]
 
 depsRequiredByEnvValidation :: [AS.Dependency.Dependency]