Skip to content

Connect to numera service

Connect to a Numera Service

Configure UI to allow requests

To enable the Numera UI to make requests to a backend service, you'll need to configure both environment variables and security headers.

1. Add the Service's Base URL

Each service must have its (environment-specific) base URL defined in the Numera UI's environment variables. Follow the steps outlined in the Environment Variables guide to add this.

2. Update the Content Security Policy (CSP)

Because of the browser’s Content-Security-Policy (CSP), the service's base URL must also be explicitly allowed.

To do this:

  • Add the service's base URL to the connect-src directive of the CSP header.
  • This is configured in the CloudFront Security Headers Behavior section.

You can find this configuration in the NumeraUi stack in the infrastructure repository: View source

Setup React Query

If your query client is generated using orval, follow these steps to integrate it with the Numera UI:

  1. Install the generated client as a dependency
  2. Add the services base Url to the baseUrlConfig
  3. Pass the service configuration as HttpInstance to the configureHttpInstances function in app.tsx.