wasp/client

Runtime configuration and environment variables of your app's client.

Enumerations

HttpMethod

The HTTP methods that a Route can use. These are the methods of Wasp's Operations and APIs, except for the ALL method that you can declare an API with.

Use it to describe a Route, for example when mocking an API with the mockApi helper that mockServer returns.

Enumeration Members

Delete

Delete: "DELETE"

Get

Get: "GET"

Head

Head: "HEAD"

Patch

Patch: "PATCH"

Post

Post: "POST"

Put

Put: "PUT"

Type Aliases

ClientConfig

ClientConfig = object

The type of the config object.

Properties

apiUrl

apiUrl: string

The URL of your server (the app's backend), without a trailing slash, from the REACT_APP_API_URL env var.

---

Route

Route = object

An HTTP method and path that identify an endpoint of your server.

Example

import { HttpMethod, type Route } from "wasp/client";

const route: Route = { method: HttpMethod.Get, path: "/foo/bar" };

Properties

method

method: HttpMethod

path

path: string

Variables

config

const config: ClientConfig

The client's configuration object.

Example

import { config } from "wasp/client";

console.log(config.apiUrl);

See

Accessing the configuration

---

env

const env: ClientEnv

The client's validated environment variables.

It contains the env vars that Wasp defines (like REACT_APP_API_URL) and the ones you validate with the client.envValidationSchema field of the app spec. It leaves out any other env var, even if its name starts with REACT_APP_.

Wasp merges your validation schema with its own and validates import.meta.env with it, both when Vite starts (in development and when building) and when the client code loads.

Client env vars are embedded into the client code at build time, so anyone can read them. Never store secrets in them. Their names must start with REACT_APP_.

You can also read import.meta.env.REACT_APP_SOME_VAR_NAME directly, but we don't recommend it: import.meta.env isn't validated, and missing env vars can cause runtime errors.

Example

import { env } from "wasp/client";

// Wasp-defined
const apiUrl = env.REACT_APP_API_URL;

// User-defined
const analyticsId = env.REACT_APP_ANALYTICS_ID;

See

• Client env vars
• Custom env var validations
• defineEnvValidationSchema to define your validation schema.

Referenced Types

ClientEnv

ClientEnv = object

The type of env.

See

Wasp client env vars

Indexable

[name: string]: unknown

The env vars from your client.envValidationSchema, with the types your Zod schema outputs.

Properties

REACT_APP_API_URL

REACT_APP_API_URL: string

The URL of your server, which the client uses to call it. Wasp sets it during development (wasp start). Your deployed app requires it: set it to the URL of your server as the user's browser sees it (with the DNS and proxies considered).