Skip to main content

Config

The @hv/config package exposes a vendor-agnostic interface to app configuration values integrations.

Configuration values include general app settings as well as vendor-specific settings and secrets for all vendor packages currently supported by the High Velocity front-end app. Note that we also have a Features package @hv/feature for feature flags.

We provide a default implementation using standard environment variables in @hv/environment-variables-config, which supports running Next.js locally with a .env.local file and deployed to a Vercel environment. To read configuration values from another source, such as a database or cloud service, you will want to implement a new configuration vendor integration package.

This package also includes some additional configuration related utilities to support the High Velocity front-end app.

note

If choosing environment variables as the source, please reference the many examples found at apps/web/.env.template in your High Velocity front-end app source code.

  • For local development, copy the file to .env.local and fill in the values needed for your implementation.
  • For Vercel deployments, setup your environment variables via the Vercel UX or CLI tool.

Integration Function​

The integration factory function instantiates an Integration.Config, the interface to the config provider. It is intended to be used in server components or route handlers.

This Function is Server Only

Do not try to instantiate the Config() function in client ("use client") components. Use the hooks provided in this package instead.

Usage​

Example usage:

import { Config } from '@hv/config';

...

const { getValue } = Config();

const { siteRoot } = await getValue('environment', { locale: 'en-US' });

API​

The @hv/config package contains an /endpoints folder that exports code to stand-up Next.js Route Handlers.

These endpoints support session cookie management and authentication for the High Velocity front-end app.

Hooks​

@hv/config/client exports React hooks to support configuration in client components.

useBasePath()​

Supports localization by providing the base path for the current locale.

useConfig()​

Provides accesst to public (not sensitive) configuration values.

Components​

@hv/config/client exports React components to help make public configuration values available in client components.

Middleware​

@hv/config/edge exports a separate integration factory function getMiddlewareConfig() for middleware, which uses the Edge runtime instead of Node.js runtime.

Middleware receives only the subset of configuration values that are needed.

Reference​

For more documentation on the types exposed by this package, check out the reference section:

Reference