Azure App Service does not take environment variables

Question

I have deployed two Azure App Services. A front end and a back end. Both running on Node 14 LTS. Individually the services work fine. But they can't talk to each other.

I've specified the necessary environment variables in the settings:

But if I go to my front end it picks up another VUE_APP_API_BASE_URL AND VUE_APP_API_PORT, and not the one I specified in the settings. So I get a 404 when making a request to the backend.

The front end makes use of this code:

import axios from 'axios'  
const PORT = process.env.VUE_APP_API_PORT  
const BE_URL = process.env.VUE_APP_API_BASE_URL  
  
const instance = axios.create({  
  withCredentials: true,  
  headers: {  
    'Content-Type': 'application/json;charset=UTF-8'  
  },  
  baseURL: BE_URL + PORT + '/api/'  
})  
  
export default instance  

What could I be missing? When I look at the request that is being made, it's taking the URL of the front end as VUE_APP_API_BASE_URL, and not the one specified in the settings.

Perhaps anything I can add in the startup command that will help setting these two variables correctly?

Any help is greatly appreciated, I'm kind of very stuck!