How to configure Rest API-URI based versioning endpoints in UI/UX with out code changes?

Question

My application has both UI and API.

My REST API versioning looks like below using URI versioning mechanism.

a) http://api.example.com/v1/products
b) http://api.example.com/v2/products

Note: api.example.com is my base url and my Controller has @RequestMapping("/v1/products")

My Angular UI/UX application has below Create End-point configured in configuration "prod-env.json" file as shown below.

"prod-env.json" file :

{
    "apis": 
{
"createProduct": "https://api.example.com/v1/products/product"
}
}

The problem here is that each time when there is API URI versioning, I had to go and manually edit the "prod-env-json" file of my UI/UX and have to go for a release on UI side too.

Is there a way to avoid at my UI/UX manual code changes? (I mean is there a way that I could configure the URI using any tool like by just giving input of the new version eg: v2 and it will be placed in the URI as below)

https://api.example.com/{**new_version**}/products/product

Answer 1

This doesn't quite answer your question but just want to share my view.

First, normally the API version does not change regularly. So the point of automatically change the version here is not really reducing the effort to me.

Second, you don't want to tight the API version that the Frontend uses to the Backend. Especially a new API version has a high chance to break the Frontend.

So I would say, you'll want to separate them. And separate the base url/version with the path, do not duplicate them among APIs.

If you really want to implement the automatic versioning, just create an API to get the version on page load, then store that version in local/session storage for further usage.

Answer 2

I use a structure like this in Angular, because in the environment there must be only constants that have a global impact:

https://angular.io/guide/build

environment.prod.ts

export const environment = {
  production: true,
  apiHost: 'http://api.example.com',
  apiVersion: '1',
}

environment.test.ts

export const environment = {
  production: false,
  apiHost: 'http://api-test.example.com',
  apiVersion: '1',
}

apis.config.ts

import { environment } from './../environments/environment';

export const apis = {
  createProduct: `${environment.apiHost}/${environment.apiVersion}/products`,
  createUsers: `${environment.apiHost}/${environment.apiVersion}/users`,
}