Azure Static Web App not using environment.prod.ts value for connection string

I just deployed an Angular App out to Azure as a Static Web App and it is running ok.

But within my app I have a file called "environment.prod.ts" in an environments folder with the following code.

export const environment = {
production: true,
baseUrl: "https://fredscarsapi.azurewebsites.net/"
}


I prefix all of my WebAPI Rest call URLs with 'baseUrl'.

So one of my Rest Service calls should look like this:

https://fredscarsapi.azurewebsites.net/vehicles


But instead it is just prefixing the Rest URL with the URL of the static web app like this:

https://orange-mud-02feebe0f.4.azurestaticapps.net/api/vehicles




I did notice going from Angular 13 or 14 to 15 that the environments folder is no longer there. I just manually added it in and everything works locally.

The environment.ts file for local development looks like this:

export const environment = {
production: false,
baseUrl: "/"
}


Does anyone know why the production environment baseUrl value is not taking affect? Should it?

Also I added a configuration setting for the Static Web App in Configuration -> Application Settings for baseUrl. But I don't know how to make it take affect (there is no restart button or anything) or if it is doing anything.

And, I read that it is possible to update settings from the Azure CLI.

So I ran this command:

az staticwebapp appsettings set --name FredsCars --setting-names "baseUrl=https://fredscarsapi.azurewebsites.net/"


It seemed to look successful from the command line. But it doesn't seem to affect or fix the application either.

I am at a loss. What do I need to do to set this baseUrl value for the web app?


UPDATE 1

Well I modified the environment.ts file to set baseUrl to: https://fredscarsapi.azurewebsites.net/

Now it uses the correct URL to call my Web Service on Azure and comes back with 200 OK.



But now I get this error message in the console window: "Access to XMLHttpRequest at 'https://fredscarsapi.azurewebsites.net/api/vehicleTypes' from origin 'https://orange-mud-02feebe0f.4.azurestaticapps.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."



I off to research this and fix. I will be back to document.


Update 2

I got the application to work by adding the the URL of the (Angular) Azure Static Web App to the CORS allowed origins of the (Web API) Azure App Service.

But I still don't have the answer to my original question. I will appreciate anyone who can answer:

Why does the Angular Static Web App on Azure use environment.ts in Production mode? It should use environment.prod.ts if I understand correctly.

Continue reading...