Framework Presets

Client fragment prefix settings for Vite, Expo, SvelteKit, and Astro.

Presets provide framework-specific client options. Expo also provides its compiler-backed runtime source.

import {
  astro,
  expo,
  sveltekit,
  vite,
} from "@ayronforge/envil/presets";

Vite

import {
  client,
  createEnv,
  requiredString,
} from "@ayronforge/envil";
import { vite } from "@ayronforge/envil/presets";

export const appEnv = createEnv(
  client(
    {
      API_URL: requiredString,
    },
    {
      ...vite,
      runtimeEnv: import.meta.env,
    },
  ),
);

This reads VITE_API_URL.

Expo

Add the Envil compiler to the Expo Babel configuration:

module.exports = function (api) {
  api.cache(true);

  return {
    presets: ["babel-preset-expo"],
    plugins: ["@ayronforge/envil/plugins/expo"],
  };
};

The preset can then be passed directly:

import {
  client,
  createEnv,
  requiredString,
} from "@ayronforge/envil";
import { expo } from "@ayronforge/envil/presets";

export const appEnv = createEnv(
  client(
    {
      APP_URL: requiredString,
    },
    expo,
  ),
);

The compiler turns APP_URL into a literal process.env.EXPO_PUBLIC_APP_URL reference before Expo performs its own environment-variable inlining. Client keys must therefore be declared in an inline object literal.

Additional client options can be composed normally:

client(
  {
    APP_URL: requiredString,
  },
  {
    ...expo,
    emptyStringAsUndefined: true,
  },
)

Custom prefix

No preset is required:

client(
  {
    API_URL: requiredString,
  },
  {
    runtimeEnv: browserRuntime,
    prefix: "PUBLIC_",
  },
)

Use fromEnv when only one property needs a different external name.