Change Backend URL based on Deployment Space in React UI – MTA

We are using React for our UI project and backend is in Spring Boot.

We are trying to deploy our application in canary landscape in 4 different cf spaces, say, dev, test, e2e, and demo.

We are using MTA based deployment to deploy both our UI and backend app.

We want to generate a common Build for UI but want to change the url based on deployment space, for example:

dev space: dev-backend-app.domain.com

test space: test-backend-app.domain.com

e2e space: e2e-backend-app.domain.com

Deployment will be per space but we want to promote same build everywhere.

To achieve this, we used following commands using dotenv dependency :

 "start:dev":"env-cmd -f .env.dev react-scripts start",
    "start:test":"env-cmd -f .env.test react-scripts start",

in .env.dev or .env.test, we set backend url which we can read from process.env

REACT_APP_BACKEND_URL=dev-backend-app.domain.com

Now, im able to run my application locally by ; npm run start:dev and it is successful loading env and working.
However, I want to achieve this via mta yaml file. To achieve this i modified mta.yaml file module to :

- name: ui-app
  type: nodejs
  path: client/customer_app/build/
  build-parameters:
    builder: custom
    commands:
      - npm install
  parameters:
    memory: 2048M
    disk-quota: 2048M
    instances: 1
    buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
    routes:
      - route: ${target}-ui-app.${domain}
    command: npm run start:dev

However, on deployment fails with :

[2024-09-26T04:00:30.909161] bash: line 1: npm: command not found (STDERR, APP/PROC/WEB)#

Hence, looking for solution to detect/change backend url at runtime and not at compile time ( so we create one binary).