migrate to experimental astro:env, separate config and processEnv schemas

Author: nemanjam

astro.config.ts

@@ -6,41 +6,33 @@ import { defineConfig } from 'astro/config';
 
 // must use relative imports, and their entire import subtrees
 import { remarkReadingTime } from './plugins/remark-reading-time.mjs';
+//
 // all relative imports in subtree
-import { CONFIG } from './src/config';
+import { envSchema, PROCESS_ENV } from './src/env';
 import { expressiveCodeIntegration } from './src/libs/integrations/expressive-code';
 import { sitemapIntegration } from './src/libs/integrations/sitemap';
 
-const { SITE_URL } = CONFIG;
+const { SITE_URL } = PROCESS_ENV;
 const remarkPlugins = [remarkReadingTime];
 
 export default defineConfig({
   site: SITE_URL,
+  experimental: { env: envSchema },
   trailingSlash: 'ignore',
   // default
   compressHTML: true,
-  server: {
-    port: 3000,
-  },
-  devToolbar: {
-    enabled: false,
-  },
+  server: { port: 3000 },
+  devToolbar: { enabled: false },
   integrations: [
     expressiveCodeIntegration(),
     sitemapIntegration(),
     react(),
-    // applyBaseStyles: false prevents double loading of tailwind
-    tailwind({
-      applyBaseStyles: false,
-    }),
     mdx(),
-    icon({
-      iconDir: 'src/assets/icons',
-    }),
+    // applyBaseStyles: false prevents double loading of tailwind
+    tailwind({ applyBaseStyles: false }),
+    icon({ iconDir: 'src/assets/icons' }),
   ],
-  markdown: {
-    remarkPlugins,
-  },
+  markdown: { remarkPlugins },
   vite: {
     build: {
       sourcemap: false,

package.json

@@ -30,7 +30,7 @@
     "@astrojs/tailwind": "^5.1.0",
     "@fontsource-variable/inter": "^5.0.20",
     "@tailwindcss/typography": "^0.5.13",
-    "astro": "^4.13.1",
+    "astro": "^4.14.4",
     "astro-embed": "^0.7.2",
     "astro-expressive-code": "^0.35.6",
     "astro-icon": "^1.1.0",

src/components/Giscus.astro

@@ -35,7 +35,8 @@ const { class: className } = Astro.props;
 
   import { SELECTORS } from '@/constants/dom';
   import { THEME_CONFIG } from '@/constants/theme';
-  import { getCurrentMode, sendModeToGiscus } from '@/utils/theme';
+  import { sendModeToGiscus } from '@/utils/dom';
+  import { getCurrentMode } from '@/utils/theme';
 
   import type { ChangeThemeCustomEvent } from '@/types/constants';
 

src/config.ts

@@ -1,35 +1,20 @@
-// all relative imports in config subtree
-import dotenv from 'dotenv';
+import { SITE_URL } from 'astro:env/client';
+import { NODE_ENV, PREVIEW_MODE } from 'astro:env/server';
 
-import { configSchema, nodeEnvValues } from './schemas/config';
-import { validateConfig } from './utils/config';
+import { configSchema } from '@/schemas/config';
+import { prettyPrintObject } from '@/utils/log';
+import { validateData } from '@/utils/validation';
 
-import type { ConfigType } from './types/config';
-
-/*------------------ load .env file -----------------*/
-
-// import.meta.env is not available in astro.config.mjs, only after the config is loaded.
-// ! MUST use process.env for vars used in astro.config.mjs.
-// https://github.com/withastro/astro/issues?q=.env+file+not+loaded
-
-const NODE_ENV = process.env.NODE_ENV;
-
-if (!nodeEnvValues.includes(NODE_ENV)) {
-  console.error('Invalid process.env.NODE_ENV: ', NODE_ENV);
-  throw new Error('Invalid process.env.NODE_ENV');
-}
-
-const envFileName = `.env.${NODE_ENV}`;
-dotenv.config({ path: envFileName });
+import type { ConfigType } from '@/types/config';
 
 /*-------------------- configData -------------------*/
 
 /** SSG - all env vars are build time only. */
 const configData: ConfigType = {
-  NODE_ENV: process.env.NODE_ENV,
-  PREVIEW_MODE: process.env.PREVIEW_MODE,
+  NODE_ENV,
+  PREVIEW_MODE,
   /** all urls without '/' */
-  SITE_URL: process.env.SITE_URL,
+  SITE_URL,
   SITE_TITLE: 'Nemanja Mitic',
   SITE_DESCRIPTION: 'I am Nemanja, full stack developer',
   PAGE_SIZE_POST_CARD: 3,
@@ -47,4 +32,6 @@ const configData: ConfigType = {
 };
 
 // todo: Config should go into import.meta.env in astro.config.ts
-export const CONFIG = validateConfig(configData, configSchema);
+export const CONFIG = validateData(configData, configSchema);
+
+prettyPrintObject(CONFIG, 'parsed CONFIG');

src/env.ts

@@ -0,0 +1,62 @@
+import { envField } from 'astro/config';
+
+// all relative imports in env subtree
+import dotenv from 'dotenv';
+
+import { nodeEnvValues, processEnvSchema } from './schemas/config';
+import { prettyPrintObject } from './utils/log';
+import { validateData } from './utils/validation';
+
+import type { ProcessEnvType } from './types/config';
+
+/*------------------ load .env file -----------------*/
+
+// import.meta.env is not available in astro.config.mjs, only after the config is loaded.
+// ! MUST use process.env for vars used in astro.config.mjs.
+// https://github.com/withastro/astro/issues?q=.env+file+not+loaded
+
+const NODE_ENV = process.env.NODE_ENV;
+
+if (!nodeEnvValues.includes(NODE_ENV)) {
+  console.error('Invalid process.env.NODE_ENV: ', NODE_ENV);
+  throw new Error('Invalid process.env.NODE_ENV');
+}
+
+const envFileName = `.env.${NODE_ENV}`;
+dotenv.config({ path: envFileName });
+
+/*------------------ validate processEnvData -----------------*/
+
+const processEnvData: ProcessEnvType = {
+  NODE_ENV: process.env.NODE_ENV,
+  PREVIEW_MODE: process.env.PREVIEW_MODE,
+  SITE_URL: process.env.SITE_URL,
+};
+
+export const PROCESS_ENV = validateData(processEnvData, processEnvSchema);
+
+prettyPrintObject(PROCESS_ENV, 'parsed PROCESS_ENV');
+
+/*------------------ experimental.env.schema -----------------*/
+
+export const envSchema = {
+  schema: {
+    // server
+    NODE_ENV: envField.string({
+      context: 'server',
+      access: 'public',
+      default: 'development',
+    }),
+    PREVIEW_MODE: envField.boolean({
+      context: 'server',
+      access: 'public',
+      default: false,
+    }),
+    // client
+    SITE_URL: envField.string({
+      context: 'client',
+      access: 'public',
+      default: 'http://localhost:3000',
+    }),
+  },
+};

src/schemas/config.ts

@@ -6,26 +6,31 @@ export const booleanValues = ['true', 'false', ''] as const;
 export const modeValues = ['light', 'dark'] as const;
 export const themeValues = ['default-light', 'default-dark', 'green-light', 'green-dark'] as const;
 
-export const configSchema = z.object({
+export const processEnvSchema = z.object({
   NODE_ENV: z.enum(nodeEnvValues),
   PREVIEW_MODE: z
     .enum(booleanValues)
     .transform((value) => value === 'true')
     .default('false'),
   // ensure no trailing slash
   SITE_URL: z.string().url().regex(/[^/]$/, 'SITE_URL should not end with a slash "/"'),
-  SITE_TITLE: z.string().min(1),
-  SITE_DESCRIPTION: z.string().min(1),
-  PAGE_SIZE_POST_CARD: z.number(),
-  PAGE_SIZE_POST_CARD_SMALL: z.number(),
-  MORE_POSTS_COUNT: z.number(),
-  DEFAULT_MODE: z.enum(modeValues), // check that theme and mode match
-  DEFAULT_THEME: z.enum(themeValues),
-  AUTHOR_NAME: z.string().min(1),
-  AUTHOR_EMAIL: z.string().email(),
-  AUTHOR_GITHUB: z.string().url(),
-  AUTHOR_LINKEDIN: z.string().url(),
-  AUTHOR_TWITTER: z.string().url(),
-  AUTHOR_YOUTUBE: z.string().url(),
-  REPO_URL: z.string().url(),
 });
+
+export const configSchema = z
+  .object({
+    SITE_TITLE: z.string().min(1),
+    SITE_DESCRIPTION: z.string().min(1),
+    PAGE_SIZE_POST_CARD: z.number(),
+    PAGE_SIZE_POST_CARD_SMALL: z.number(),
+    MORE_POSTS_COUNT: z.number(),
+    DEFAULT_MODE: z.enum(modeValues), // check that theme and mode match
+    DEFAULT_THEME: z.enum(themeValues),
+    AUTHOR_NAME: z.string().min(1),
+    AUTHOR_EMAIL: z.string().email(),
+    AUTHOR_GITHUB: z.string().url(),
+    AUTHOR_LINKEDIN: z.string().url(),
+    AUTHOR_TWITTER: z.string().url(),
+    AUTHOR_YOUTUBE: z.string().url(),
+    REPO_URL: z.string().url(),
+  })
+  .merge(processEnvSchema);

src/types/config.ts

@@ -1,6 +1,8 @@
-import { configSchema } from '../schemas/config';
-
 import type { z } from 'zod';
+import type { configSchema, processEnvSchema } from '../schemas/config';
 
 export type ConfigSchemaType = typeof configSchema;
 export type ConfigType = z.infer<ConfigSchemaType>;
+
+export type ProcessEnvSchemaType = typeof processEnvSchema;
+export type ProcessEnvType = z.infer<ProcessEnvSchemaType>;

src/utils/config.ts

@@ -0,0 +1,7 @@
+// @ts-expect-error, js lib
+import treeify from 'object-treeify';
+
+export const prettyPrintObject = (object: Record<string, unknown>, prefix = ''): void => {
+  const stringData = treeify(object);
+  console.log(`${prefix}:\n\n${stringData}`);
+};

src/utils/log.ts

@@ -0,0 +1,14 @@
+import { z, ZodSchema } from 'zod';
+
+export const validateData = <T extends ZodSchema>(config: z.infer<T>, schema: T): z.infer<T> => {
+  const parsedConfig = schema.safeParse(config);
+
+  if (!parsedConfig.success) {
+    console.error('Validation failed: ', parsedConfig.error.flatten().fieldErrors);
+    throw new Error('Validation failed');
+  }
+
+  const { data: parsedConfigData } = parsedConfig;
+
+  return parsedConfigData;
+};