Custom Base URL

Orval allows you to set a custom base url for each OpenAPI specification. This can be a part of the url that's been omitted from the specification or the entire url. You can also configure Orval to read the servers field in the specification.

1module.exports = {
2  petstore: {
3    output: {
4      target: 'src/petstore.ts',
5      baseUrl: '/api/v2',
6      // baseUrl: 'https://petstore.swagger.io/v2',
7    },
8  },
9};

Base URL from the OpenAPI Specification

To use the URL defined in the OpenAPI specification, described by the servers field, set getBaseUrlFromSpecification to true, which will make Orval correctly identify which base URL to use for each operation. Read more about configuration settings in the output configuration reference.

1module.exports = {
2  petstore: {
3    output: {
4      target: 'src/petstore.ts',
5      baseUrl: {
6        getBaseUrlFromSpecification: true,
7        variables: {
8          environment: 'api.dev',
9        },
10      },
11    },
12  },
13};

It's also possible to configure the base URL directly on the HTTP client instead.

Axios

Axios allows setting a default baseUrl for all requests:

axios.defaults.baseURL = '<BACKEND URL>'; // use your own URL here or environment variable

Or using an interceptor:

1axios.interceptors.request.use((config) => {
2  return {
3    ...config,
4    baseURL: '<BACKEND URL>', // use your own URL here or environment variable
5  };
6});

It is also possible to create a custom Axios instance. Check the full guide for more details.

const AXIOS_INSTANCE = axios.create({ baseURL: '<BACKEND URL>' }); // use your own URL here or environment variable

Fetch Client

It is possible to set a base URL by providing a custom Fetch client.

1const getUrl = (contextUrl: string): string => {
2  const url = new URL(contextUrl);
3  const pathname = url.pathname;
4  const search = url.search;
5  const baseUrl =
6    process.env.NODE_ENV === 'production'
7      ? 'productionBaseUrl'
8      : 'http://localhost:3000';
9
10  const requestUrl = new URL(`${baseUrl}${pathname}${search}`);
11
12  return requestUrl.toString();
13};
14
15export const customFetch = async <T>(
16  url: string,
17  options: RequestInit,
18): Promise<T> => {
19  const requestUrl = getUrl(url);
20  const requestInit: RequestInit = {
21    ...options,
22  };
23
24  const request = new Request(requestUrl, requestInit);
25  const response = await fetch(request);
26  const data = await getBody<T>(response);
27
28  return { status: response.status, data } as T;
29};

Please refer to the complete sample here

Angular HTTP Client

Angular allows setting an interceptor to automatically add the URL of the API.

1import { Injectable } from '@angular/core';
2import {
3  HttpEvent,
4  HttpInterceptor,
5  HttpHandler,
6  HttpRequest,
7} from '@angular/common/http';
8import { Observable } from 'rxjs/Observable';
9
10@Injectable()
11export class APIInterceptor implements HttpInterceptor {
12  intercept(
13    req: HttpRequest<any>,
14    next: HttpHandler,
15  ): Observable<HttpEvent<any>> {
16    const apiReq = req.clone({ url: `<BACKEND URL>/${req.url}` });
17    return next.handle(apiReq);
18  }
19}

Remember to add the interceptor to your providers in your module.

1providers: [
2  {
3    provide: HTTP_INTERCEPTORS,
4    useClass: APIInterceptor,
5    multi: true,
6  },
7];