Accessing the configuration

Whenever you start a Wasp app, you are starting two parts of it.

• The client - A React app that implements your app's frontend.

  During development, Vite serves it with hot reloading. In production, it's a simple process that serves pre-built static files with environment variables embedded during the build (details depend on how you deploy it).

• The server - An Express server that implements your app's backend.

  During development, wasp start runs it inside the Vite dev server's process and restarts it whenever you change server code. In production, it's a regular Express server run using Node.

Check the introduction for a more in-depth explanation of Wasp's runtime architecture.

You can configure both of them through environment variables. See the deployment instructions for a full list of supported variables.

Wasp gives you runtime access to the processes' configurations through configuration objects.

Server configuration object

The server configuration object contains these fields:

• frontendUrl: String - Set it with env var WASP_WEB_CLIENT_URL.

  The URL of your client (the app's frontend).
  Wasp automatically sets it during development when you run wasp start.
  In production, you should set it to your client's URL as the server sees it (i.e., with the DNS and proxies considered).

You can access it like this:

import { config } from 'wasp/server'

console.log(config.frontendUrl)

Client configuration object

The client configuration object contains these fields:

• apiUrl: String - Set it with env var REACT_APP_API_URL

  The URL of your server (the app's backend).
  Wasp automatically sets it during development when you run wasp start.
  In production, it should contain the value of your server's URL as the user's browser sees it (i.e., with the DNS and proxies considered).

You can access it like this:

import { config } from 'wasp/client'

console.log(config.apiUrl)